Web Components
Contents hide
<video>
element. We place a single tag into our code and browser renders multiple elements like slider, volume controls, buttons and player window. Such elements are using Shadow DOM.Templates are pretty straight forward. We are already using different javascript template engines for client side rendering. Now they are available as native browser functionality by defining your templates inside <template>
element. The content of the <template>
element is parsed by the parser, but it doesn’t trigger scripts evaluation, downloading images, and so on. And, of course, <template>
element is not rendered.HTML imports is a killer feature that allows all this functionality around web components to arrive to your HTML pages. This is an API which allows you to inject HTML fragments from external files into you HTML page, using the link tag:<link rel="import" href="element.html" />
Support
Support of the various standards that Web Components consist of is currently not as good to start using this features right a way. But chrome and opera teams are doing pretty good progress on that. Features support as for June 2014 was presented at Google I/O:
<polymer-element>
tag to the browser, which automatically turns templates into shadow DOM and registers custom elements for us. All we need to do is to tell Polymer what name to use for the tag and to make sure we include our template markup.X-Tags is a small JavaScript library, created and supported by Mozilla and built upon W3C Web Component polyfills provided by the Polymer project. X-Tag provides several powerful features that streamline element creation such as: Custom events and delegation, mixins, accessors, component lifecycle functions, pseudos and more.Bosonic is a sort of transpiler that takes Web Components in HTML files and transforms them into JS and CSS code, runnable on modern browsers. Bosonic uses some Polymer polyfills (Custom Elements, Mutation Observers and Weak Maps) and brings its own polyfills, including a powerful yet simple one for Shadow DOM.