Web Components Polymer Agenda I want bootstrap : 3 Today 4 We want components ! widgets frameworks pluggins Reusable Encapsulatable Etendable Composable We want Blackboxes ! Web components 5 Why components ? 4 specifications Import html Shadow Dom template Custom Element The four parts of Web Components are designed to work together, but you can also pick and choose which parts of Web Components to use. 6 What is it ? include HTML documents in other HTML documents You're not limited to markup either. An import can also include CSS, JavaScript, or anything else an.html file can contain. In other words, this makes imports a fantastic tool for loading related HTML/CSS/JS. 7 HTML IMPORT How ? To load content from another domain, the import location needs to be CORS-enabled The browser's network stack automatically de-dupes all requests from the same URL. This means that imports that reference the same URL are only retrieved once Do not block the parsing of the page 8 HTML IMPORT Jump to content HTML and CSS elements are loaded but not inserted (available). It is accessed via the import property 9 HTML IMPORT Javascript Executed in the context of the page Access to the DOM And that of the page 10 HTML IMPORT 11 SUPPORT : HTML IMPORT Shadow DOM addresses the DOM tree encapsulation problem. ENCAPSULATION insulated container New node type shadow root shadow host 12 SHADOW DOM Javascript createShadowRoot element.shadowRoot Instead of Your page looks like 13 SHADOW DOM SHADOW DOM VS LIGHT DOM visible subtree (childNodes, children, innerHTML...) internal node Composed DOM: what the browser sees and makes 14 SHADOW DOM INSERTS POINTS : the content ! Define zones in the shadow render Dom No logical connection 15 SHADOW DOM 16 SHADOW DOM : SUPPORT What is it ? DOM Models reusable 17 TEMPLATE NOT IN DOCUMENT ! No side effect: DOM not returned uninterpreted script not loaded image Templates allow you to declare fragments of markup which are parsed as HTML, go unused at page load, but can be instantiated later on at runtime. 18 TEMPLATE Usage Recovery selector Access to content: content clone: becomes alive insertion of clone 19 TEMPLATE 20 TEMPLATE SUPPORT There's nothing modern about soup. Help us custom elements. You're our only hope! Define new types of HTML element ! Extend existing elements One functionality within a "tag Extend the API of existing DOM elements 21 CUSTOM ELEMENT How ? registerElement name (with -) proto (HTMLElement default) 22 CUSTOM ELEMENT EXTEND EXISTING ELEMENT 23 CUSTOM ELEMENT 24 CUSTOM ELEMENT SUPPORT . SUPPORT too weak . Solutions : 25 It looks great BUT.. polyfills (platform.js) components (core-elements, paper-elements) sugaring (polymer.js) 26 POLYMER Web Components Polyfills (custom element et HTMLImports) X-Tag Custom Elements X-Tag Core Library 27 X-TAG 28 Demo Ressources Import Shadow Dom Styling Shadow Dom Template Custom Elements The Web Component Ecosystem Polymer X-Tag Material Design Meetup Webcomponents Credits: Eric Bidelman,Rob Dodson, Dominic Cooney, Cyril Balit 29 After credits scene !! 30