This is Part 1 of a 3-part series.<\/p>\r\n
This is a crash course for getting familiar with Web Components. It strives to be concise, rather than exhaustive. There a lot of other great resources available on the topic: check out HTML5 Rocks’ tutorials<\/a> and this massive list of resources<\/a>.<\/p>\r\n\r\n First<\/strong> \u2014 they’re easy to manage \u2013 thay can instantiate themselves and clean up after themselves.<\/p>\r\n Second<\/strong> \u2014 Simple, declarative usage means they’re easy to include and configure:<\/p>\r\n Third<\/strong> \u2014 they’re modular and reusable. A standard format for building, implementing, and interacting with UI components means that it’s easy to use them across different frameworks and environments.<\/p>\r\n Fourth<\/strong> \u2014 they can provide encapsulation for components’ styles and HTML. So they play nice with other styles and things happening on a page.<\/p>\r\n Web Components are made up of 4 separate specifications. They go together nicely, but you don’t have to use them all \u2013 you can pick and choose based on your situation. Custom Elements<\/strong> and Shadow DOM<\/strong> are most important; HTML Imports<\/strong> and Templates<\/strong> are really just handy. <\/p>\r\n We’re sticking to native code for now (no polyfills), so be sure to use a browser that supports<\/a> the spec, when looking at the demos.<\/p>\r\n Custom Elements are the heart of Web Components. This API lets you create new elements, add public methods to them, and gives you 4 lifecycle callbacks to manage them.<\/p>\r\n When you use a typical JS-based component (for example, like: All you have to do is create an object to be used as your element’s prototype, add the callbacks and functions to it, and then register it with a hyphenated name (all custom elements must have a hypen \u2013 that’s how you know they’re not native elements).<\/p>\r\n This is fantastic, because it means that your components can both self-initialize and self-destroy.<\/p>\r\n Let’s say you have a page where a user action can open up a new widget. This particular widget adds some keyboard listeners to the page to check for shortcuts. Today, you’d probably call a JS function to initialize the widget. And when the user closes it, you’d need to call a destroy function that would remove the event listeners. Because you don’t want those listeners to stick around \u2013 using up memory and continuing to take action on events.<\/p>\r\n With Custom Elements \u2013 you (or your framework) don’t have to worry about those details. Just insert the element into the DOM to initialize it, and when you remove it from the DOM, it can clean up after itself. Awesome!<\/p>\r\n You can also extend native elements, like this:<\/p>\r\n Update 4\/2015:<\/strong> Extending with Custom Elements Demo<\/a><\/p>\r\n Shadow DOM encapsulates elements. It allows you to hide a number of elements inside of an element – much like browsers do with their native UI elements (e.g. the controls in a You can add CSS inside a shadow root, and it won’t select elements outside of the shadow root (Note that you can’t put And conversely, CSS selectors on the page won’t select elements inside a shadow root (and that goes for querySelector too). But those elements will still inherit inheritable properties (like font-family).<\/p>\r\n If the page needs to style something that’s in a shadow root, it’s still possible, and the intention of your CSS will be very obvious (which is a good thing):<\/p>\r\n Update 4\/2015:<\/strong> The above features are being removed from the spec. \r\n There’s one other thing you can do with Shadow DOM: leave an element’s contents outside of the shadow root \u2013 so they’re still accessible to the page \u2013 but visually reflow them as if they were<\/em> in the shadow root. Just add a In that example \u2013 you’ll see the lines orderd as “two three one” but only the “one” is actually encapsulated in the shadow root.<\/p>\r\n Note that if there wasn’t a Shadow DOM Demo<\/a><\/p>\r\n Imports give you a single place to put the styles, scripts, and templates required for a component, so pages only need to include one thing.<\/p>\r\n CSS in an import will apply to the page, and scripts will execute in the usual global context.<\/p>\r\n Other regular HTML elements in the import will not<\/strong> be visible on the page or accessible to things like querySelector. Though you can access anything in the import if you need to, like this: It’s very important to note that Imports will block the rendering of your page (same as plain JS and CSS resources do) \u2013 unless you add the HTML Imports Demo<\/a><\/p>\r\n For storing HTML templates, you may have used strings in JS, or perhaps a Using it is pretty straightforward:<\/p>\r\n That’s it \u2013 nothing too fancy.<\/p>\r\n And when it comes to Web Components \u2013 Templates are pretty useless without Imports (where else would you put them?).<\/p>\r\n HTML Templates Demo<\/a><\/p>\r\n Now that we’ve looked at the pieces in isolation, let’s see how they look together. This is a super-basic example of how you might build a Web Component without any frameworks or polyfills.<\/p>\r\nWhy Web components?<\/h2>\r\n
<link rel=\"import\" href=\"my-dialog.htm\">\r\n\r\n<my-dialog heading=\"A Dialog\">Lorem ipsum<\/my-dialog><\/code><\/pre>\r\nThe Specs<\/h2>\r\n
Custom Elements<\/h3>\r\n
var myModal = new Modal(...);<\/code>), the instance has to be stored somewhere, so that you or others can call functions on it later (myModal.show();<\/code>). With Custom Elements – the actual element in the DOM is<\/em> the instance. The functions are available right on the element.<\/p>\r\n\/\/ <my-element><\/my-element>\r\n\r\nvar myProto = Object.create(HTMLElement.prototype);\r\n\r\n\/\/ Lifecycle callbacks\r\nmyProto.createdCallback = function() {\r\n \/\/ initialize, render templates, etc.\r\n};\r\nmyProto.attachedCallback = function() {\r\n \/\/ called when element is inserted into the DOM\r\n \/\/ good place to add event listeners\r\n};\r\nmyProto.detachedCallback = function() {\r\n \/\/ called when element is removed from the DOM\r\n \/\/ good place to remove event listeners\r\n};\r\nmyProto.attributeChangedCallback = function(name, oldVal, newVal) {\r\n \/\/ make changes based on attribute changes\r\n};\r\n\r\n\/\/ Add a public method\r\nmyProto.doSomething = function() { ... };\r\n\r\n\r\ndocument.registerElement('my-element', {prototype: myProto});<\/code><\/pre>\r\n\/\/ <input is=\"my-input\">\r\ndocument.registerElement('my-input, {\r\n prototype: myProto,\r\n type: 'input'\r\n});<\/code><\/pre>\r\nis=<\/code> will most likely be removed<\/a> from the spec. It may return in a different form, in a future version.<\/p>\r\nShadow DOM<\/h3>\r\n
<video><\/code>). This prevents other code on the page from accidentally messing with your element – and vice-versa.<\/p>\r\nvar shadowRoot = element.createShadowRoot();\r\nshadowRoot.appendChild(whatever);<\/code><\/pre>\r\n<link><\/code> tags in a shadow root. To reference an external stylesheet, use @import<\/code> in a <style><\/code> tag). To target the element holding the shadow root, just use the :host<\/code> selector.<\/p>\r\nmy-element::shadow p {\r\n \/* selects <p> tags in shadow roots of <my-element>'s *\/\r\n}\r\nbody \/deep\/ p {\r\n \/* selects all <p> tags - in shadow roots or not *\/\r\n}<\/code><\/pre>\r\n<content><\/code> element, and it will reflow any children of the root element:<\/p>\r\n<my-element>\r\n #shadow-root#\r\n <content><\/content>\r\n <p>one<\/p>\r\n #\/shadow-root#\r\n <p>two<\/p>\r\n <p>three<\/p>\r\n<\/my-element><\/code><\/pre>\r\n<content><\/code> element, the “two” and “three” paragraphs would not be visible (a shadow root hides the other children).<\/p>\r\nHTML Imports<\/h3>\r\n
<link rel=\"import\" href=\"dialog.htm\"><\/code><\/pre>\r\nlinkElement.import.querySelector('#template');<\/code><\/p>\r\nasync<\/code> attribute (you can listen for the load<\/code> event). Helpfully, scripts in an async import will still execute in order.<\/p>\r\nHTML Templates<\/h3>\r\n
<script><\/code> tag with a non-standard type<\/code>. But now there’s a dedicated element for it:<\/p>\r\n<template id=\"MyTemplate\">\r\n <div>Some stuff<\/div>\r\n<\/template><\/code><\/pre>\r\nvar clone = document.importNode(templateNode.content, true); \/\/ 2nd parameter for \"deep\" clone\r\n\/\/ now you can append the clone wherever you like<\/code><\/pre>\r\nAll Together Now<\/h2>\r\n