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