Transcript shadow dom - WordPress.com

Web Components
Polymer
Agenda
Today
•
I want bootstrap :
3
We want components !
4
Why components ?
•
•
•
widgets
frameworks
pluggins
•
•
•
•
Reusable
Encapsulatable
Etendable
Composable
We want Blackboxes !
 Web components
5
What is it ?
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
HTML IMPORT
• 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
SUPPORT : HTML IMPORT
11
SHADOW DOM
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 : SUPPORT
16
TEMPLATE
•
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 SUPPORT
20
CUSTOM ELEMENT
There's nothing modern about <div> 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 SUPPORT ….
24
It looks great BUT ..
•
SUPPORT too weak …….
•
Solutions :
25
POLYMER
•
•
•
polyfills (platform.js)
components (core-elements, paper-elements)
sugaring (polymer.js)
26
X-TAG
•
•
•
Web Components Polyfills (custom element et HTMLImports)
X-Tag Custom Elements
X-Tag Core Library
27
Demo
28
Ressources
•
•
•
•
•
•
•
•
•
•
•
Import
Shadow Dom
Styling Shadow Dom
Template
Custom Elements
The Web Component Ecosystem
Polymer
X-Tag
Material Design
Meetup Webcomponents @Paris
Credits: Eric Bidelman,Rob Dodson, Dominic Cooney, Cyril Balit
29
After credits scene !!
http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/
30