In this tutorial we'll take a deep dive into how Web Components (A collection of technologies that includes Shadow DOM, HTML Templates, Custom Elements, and HTML Imports) can be used as building blocks to construct a functioning web application.

There is a fundamental problem with HTML and JavaScript that makes it hard to build reusable components / widgets - The DOM contents of the component is not encapsulated from the rest of the page. This could possibly lead to collision of IDs; unexpected JavaScript behaviour because of some existing code; broken styles; and so on. Today we overcome most of these problems by following certain conventions and assumptions. "Web Components" is a set of cutting-edge standards to solve these problems.

We’ll look at Polymer – a library for using them in modern browsers today (including new <x-mileycyrus> and <jukebox> tags!) and Yeoman – modern tooling that can help you rapidly build new apps using these technologies. Set aside a few minutes, grab some pop-corn and learn how to create your own custom elements.

A little over a year ago at JSConf EU, Angelina tried to inspire developers to take an interest in Web Components, which includes Shadow Dom, HTML Templates, HTML Imports, and Custom Elements.

Web components are about to fundamentally change how we structure our web applications. In a fast and furious fifteen minutes, we'll demystify this new technology by highlighting how, despite its complex appearance, it's actually made up of a suite of technologies providing features we're already familiar with. In fact, once you understand what web components bring to the table, you'll wonder how we ever lived without them.

Web Components is the collective name for a series of W3C modules that introduce new HTML, CSS and JavaScript properties for extending web pages with reusable components. This talk will introduce Templates, Decorators, Custom Elements and the Shadow DOM, giving you enough information to get started with the future of web platform technologies.