⚫ Provide reusable DOMNode!
⚫ Parse but not render!
⚫ Used to use !
⚫ Not parse at all
http://www.w3.org/TR/html5/scripting-1.html#the-template-element
Slide 25
Slide 25 text
!
!
Eric
!
!
!
Digital Jedi
!
!
!
footer text
!
!
Slide 26
Slide 26 text
var tpl = document.getElementById('sdom');!
!
var dom = tpl.content.cloneNode(true);!
!
shadowRoot.appendChild(dom);
Slide 27
Slide 27 text
Shadow DOM
Slide 28
Slide 28 text
Shadow DOM
⚫ Hidden nodes in DOM tree!
⚫ Encapsulation!
⚫ Keep component simple!
⚫ Browser already have this feature
http://w3c.github.io/webcomponents/spec/shadow/
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Take a Look
Slide 32
Slide 32 text
Use
⚫ Create shadow root!
⚫ appendChild to shadow root
Slide 33
Slide 33 text
var host = document!
.querySelector('.custom-component');!
!
var root = host.createShadowRoot();!
!
root.innerHTML = html_template_string;
Slide 34
Slide 34 text
DOM Tree
root
node
(host)
node
Slide 35
Slide 35 text
DOM Tree
Shadow Tree
root
node
(host)
Shadow
root
node
node
Slide 36
Slide 36 text
Get DOMNodes
⚫ querySelector, querySelectorAll on shadow root!
⚫ DOM API
Style in Shadow DOM
⚫ Scoped by default!
⚫ Possible to import separate css file!
⚫ Path issue
Slide 39
Slide 39 text
⚫ How to make custom element like !
⚫ Fill content when using it
Slide 40
Slide 40 text
Slide 41
Slide 41 text
!
Eric
!
Bidelman
!
Digital Jedi
!
footer text
!
!
!
!
!
!
!
!
!
!
!
!
!
Slide 42
Slide 42 text
⚫ as insertion point!
⚫ CSS selector to select content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Custom Element
Slide 45
Slide 45 text
Custom Element
⚫ Define your element!
⚫ Use API
http://w3c.github.io/webcomponents/spec/custom/
Slide 46
Slide 46 text
⚫ No more in standards
Slide 47
Slide 47 text
Register Element
registerElement(‘x-button', {prototype: xButtonProto});
element name options
prototype extend
Slide 48
Slide 48 text
Custom Element Name
⚫ Custom element’s name should have “-”!
⚫ ex: x-button, my-slider!
⚫ With “-”, element don’t know by browser will treat as
unresolved element, otherwise it will be unknown
element
Slide 49
Slide 49 text
Unresolved
⚫ :unresolved can use to hide/style unresolved
elements!
⚫ Avoid FOUT
Slide 50
Slide 50 text
Custom Prototype
⚫ Inherit from HTMLElement.prototype!
⚫ Add lifecycle callbacks
Slide 51
Slide 51 text
Element Lifecycle
⚫ Define in custom element standard!
⚫ created!
⚫ attached!
⚫ detatched!
⚫ attributeChanged
https://www.w3.org/Bugs/Public/show_bug.cgi?id=24314
Slide 52
Slide 52 text
var doc = document.currentScript.ownerDocument;!
!
var xButtonProto = Object.create(HTMLElement.prototype);!
!
!
xButtonProto.createdCallback = function () {!
var root = this;!
var host = this.webkitCreateShadowRoot();!
//host blah blah ...!
};!
!
!
document.registerElement(‘x-button',!
{prototype: xButtonProto}!
);
Slide 53
Slide 53 text
HTML Imports
Slide 54
Slide 54 text
Imports
⚫ Import more resources for future use!
⚫ Images, Style, Scripts…etc!
⚫ Web Component
http://www.w3.org/TR/html-imports/
Slide 55
Slide 55 text
Slide 56
Slide 56 text
⚫ `document` is importer!
⚫ Easy to work with document!
⚫ How to get its self!
⚫ ex: <template> in importee document
Slide 57
Slide 57 text
importer importee
document document
document.registerElement!
!
//register on importer
Slide 58
Slide 58 text
importer importee
document document
!
!
Slide 59
Slide 59 text
importer importee
document document
!
!
!
!
!
!
// How to get template?!
!
Slide 60
Slide 60 text
document.currentScript.ownerDocument;
Slide 61
Slide 61 text
currentScript
⚫ HTML5 API!
⚫ For 3rd party widgets to locate position
http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-currentscript