Web Components

Transcript

1. Web Components Srinivas R Sr. Product Developer BMC Software 1
2. Web Components ? BMC Software 2 Custom Elements This specification describes the method for enabling the author to define and use new types of DOM elements in a document. HTML Imports HTML Imports are a way to include and reuse HTML documents in other HTML documents. Templates This specification describes a method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents. Shadow DOM This specification describes a method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.
3. HTML Templates Declaring HTML templates Contains inert chunks of markup intended to be used later: <template id="mytemplate"> <img src=""> <!-- dynamically populate at runtime --> <div class="comment"></div> </template> • Working directly w/ DOM • Parsed; not rendered <script> not run, stylesheets/images not loaded, media not played • Hidden from document. Cannot traverse into its DOM e.g. document.querySelector('#mytemplate .comment') == null Using template content Two ways to access the guts: 1. template.content (a document fragment) 2. template.innerHTML <script> var t = document.querySelector('#mytemplate'); t.content.querySelector('img').src = 'logo.png'; // Populate the src at runtime. document.body.appendChild(t.content.cloneNode(true)); </script> BMC Software 3
4. Shadow DOM • Shadow DOM gives us markup encapsulation, style boundaries, and exposes (to web developers) the same mechanics browsers vendors have been using to implement their internal UI. BMC Software 4
5. Shadow DOM • Styles defined in Shadow DOM are scoped by default • Page's styles don't bleed across the shadow boundary (unless we let them) BMC Software 5
6. Custom Elements Creating new HTML elements Element definition registers the new tag with the browser: <element name="x-foo" constructor="XFoo"> <section>I'm an x-foo!</section> <script> var section = this.querySelector('section'); this.register({ prototype: { readyCallback: function() { this.textContent = section.textContent; // this == <element> }, foo: function() { alert('foo() called'); } } }); </script> </element> • Lifecycle callbacks (ready, inserted, removed) give insight to element's life • e.g. readyCallback() is invoked when the custom element is created AND its definition has been registered • After registration, use it like any standard DOM element BMC Software 6
7. Custom Elements Registering elements in JS var XFooProto = Object.create(HTMLElement.prototype); // Setup optional lifecycle callbacks: ready, inserted, removed. XFooProto.readyCallback = function() { this.textContent = "I'm an x-foo!"; }; // Define its JS API. XFooProto.foo = function() { alert('foo() called'); }; var XFoo = document.register('x-foo', {prototype: XFooProto}); //var xFoo = new XFoo(); //var xFoo = document.createElement('x-foo'); Extending existing HTML elements <element name="mega-button" extends="button" constructor="MegaButton"> … </element> BMC Software 7
8. Custom Elements - usage • By declaring it <x-foo></x-foo> • By creating DOM in JS var elem = document.createElement('x-foo'); elem.addEventListener('click', function(e) { e.target.foo(); // alert 'foo() called'. }); • By using new (if the constructor attribute was defined) var elem = new XFoo(); document.body.appendChild(elem); BMC Software 8
9. Custom elements ♥ Shadow DOM <element name="x-foo-shadow" constructor="XFooShadow"> <template> <style> @host { * { display: block; background: #ffcc00; ... } } </style> <section>I'm an x-foo-shadow. Gots me some Shadow DOM!</section> </template> <script> var template = this.querySelector('template'); this.register({ // this == <element> prototype: { readyCallback: function() { this.createShadowRoot().appendChild(template.content.cloneNode(true)); } } }); </script> </element> BMC Software 9
10. HTML imports Package. Distribute. Share. Reuse. <!DOCTYPE html> <html> <head> <link rel="import" href="x-foo.html"> </head> <body> <x-foo></x-foo> <!-- Element definition is in x-foo.html --> </body> </html> BMC Software 10
11. Where does Web components sit? Web Native Framework Angular Framework Ember Framework React Application Application Application Application Web components Polymer / x-tags / vanilla js BMC Software 11
12. Libraries Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers. https://www.polymer-project.org/1.0/ X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers. http://x-tags.org/ Bosonic is a set of tools that enable you to build Web Components as the spec currently describes, and supporting not-so-modern browsers like IE9. http://bosonic.github.io/ BMC Software 12
13. Polymer Google Project Web components polyfills Has rich collection of custom elements The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. BMC Software 13
14. <dom-module id="element-name"> <template> <style> /* CSS rules for your element */ </style> <!-- local DOM for your element --> <div>{{greeting}}</div> <!-- data bindings in local DOM --> </template> <script> // element registration Polymer({ is: "element-name",// add properties and methods on the element's prototype properties: { // declare properties for the element's public API greeting: { type: String, value: "Hello!" } } }); </script> </dom-module> BMC Software 14
15. Polymer Elements https://elements. polymer- project.org/ BMC Software 15
16. Web components – links / info / catalogue https://customelements.io/ Explore the world of Web Components http://webcomponents.org/ a place to discuss and evolve web component best-practices https://elements.polymer-project.org/ Polymer elements collection BMC Software 16