5. What is it ?
Include an HTML element inside another one
6. How ?
<link rel="import" href="/path/myfile.html">
CORS
Load once
Don't block page parsing
7. Get the content
HTML and CSS are just loaded but not included (available) We
retrieve the content using the import property
<link id="my-import" rel="import" href="myfile.html">
<script>
var link = document.querySelector('#my-import');
var content = link.import;
//I can now acces to my content
var el = content.querySelector('.mySelector');
document.body.appendChild(el.cloneNode(true));
</script>
8. And for Javascript ...
Run in the page context
Can access to its DOM ...
... and the one from the page
<script>
var importDoc = document.currentScript.ownerDocument;
var mainDoc = document;
</script>
14. What does this mean
Isolated container
New kind of node
shadow root
shadow host
15. With Javascript
createShadowRoot
element.shadowRoot
<button>Normal button!</button>
<button id="myBtn">Hello, world!</button>
<script>
var host = document.querySelector('#myBtn');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>
Normal button! こんにちは、影の世界!
16. Shadow DOM versus Light
DOM
<my-element>
<span>Hello</span>
</my-element>
visible sub-tree (childNodes, children, innerHTML ...)
internal node
composed DOM: what the browser see and render
17. Insertions points
Define render area in the shadow dom
No logical link
<div id="host">
<span class="title">Hello too</span>
<span>Bla Bla Bla</span>
</div>
<script>
var shadow = document.querySelector('#host').createShadowRoot();
shadow.innerHTML = '<h1>In Shadow</h1>' +
'<h2><content select=".title"></content></h2>' +
'<section><content select="*"></content></section>';
</script>
21. Not in the document
No side effect
DOM not rendered
Script not parsed
Image not loaded
22. Usage
1. Get the template with a selector
2. acces to the content with the content property
3. clone: he's alive
4. insert the clone element in the page
23. Exemple
<template id="mytemplate">
<img src="img/templates_64x64.png" alt="great image">
<div id="comment">My new comment</div>
</template>
<script>
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'img/templates_64x64.png';
t.content.querySelector('#comment').innerHTML = 'My new comment';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
</script>
My new comment
26. What is it ?
Define new HTML element
Extend existing elements
27. How ?
registerElement
a name (with a -)
a prototype (HTMLElement by default)
<script>
</script>
<my-elt></my-elt>
var myElt = document.registerElement('my-elt',HTMLElement.prototype);
28. Extend existing elements
<script>
var myButton = document.registerElement('my-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
});
</script>
<button is="”my-button”"></button>
29. Lifecycle
Declaration vs register
Seen as unresolved
pseudo-selector :unresolved
<style>
*:unresolved {
color: red;
}
</style>
<my-element>register</my-element>
<button onclick="document.registerElement('my-element')">Register</button>
i'm unresolved Register
30. Callback
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback
var myElemtProto = Object.create(HTMLElement.prototype);
myElemtProto.createdCallback = function() {};
var myElemt = document.registerElement('my-element', myElemtProto);
43. Ressources Import
Shadow Dom
Styling Shadow Dom
Template
Custom Elements
The Web Component Ecosystem
Polymer
X-Tag
Bosonic
Credits: Eric Bidelman,Rob Dodson,Dominic Cooney