iasi code camp 12 october 2013 shadow dom - mihai bîrsan
DESCRIPTION
TRANSCRIPT
![Page 1: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/1.jpg)
The Shadow DOMA Talk about Web Components in HTML5
Mihai BîrsanOctober 2013
![Page 2: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/2.jpg)
![Page 3: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/3.jpg)
The Shadow DOMA Talk about Web Components in HTML5
Mihai BîrsanOctober 2013
![Page 4: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/4.jpg)
Previously...
• Mutation Observers help observe changes in the DOM• The M in DOM is for Model• We can’t have models in the DOM
![Page 5: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/5.jpg)
There is cruft in your HTML
• Modern applications like GMail
![Page 6: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/6.jpg)
There is cruft in your HTML
• Frameworks like ExtJS
![Page 7: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/7.jpg)
There is cruft in your HTML
• HTML can be beautiful again–Readable–Meaningful
• We can encapsulate presentation and behavior into components
![Page 8: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/8.jpg)
Solutions from the future
1. Shadow DOM2. HTML Templates3. Custom Elements
![Page 9: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/9.jpg)
Warning!
• We’re about to talk about The Edge!• The Edge is bound to change rapidly• DO NOT use in production
• Polyfills are available for the technologically impatient
![Page 10: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/10.jpg)
TEMPLATES2. It’s nice to stamp out DOM
![Page 11: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/11.jpg)
Defining templates<template id="tweet-template"> <div class="tweet"> <img class="profile-picture" src="" alt="" /> <a class="author" href=""> <small class="shorthand"></small></a> <p class="tweet-content"></p> <a class="time-ago" href=""></a> </div></template>
![Page 12: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/12.jpg)
Like regular templates, but DOM
• “inert” DOM tree:parsed but not interpreted–no images or stylesheets loaded–no scripts executed
• can be cloned into to other nodes
![Page 13: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/13.jpg)
Using templates via JSvar t = document.querySelector('#tweet-template');tweets.forEach(function (myTweet) { var tweetNode = t.content.cloneNode(true); populateNode(tweetNode, myTweet); document.body.appendChild(tweetNode);});
// t.innerHTML is also also available
![Page 14: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/14.jpg)
Like regular templates, but DOM
• Very efficient–cloning with nodes, not parsing–resources are loaded late, only when
needed
![Page 15: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/15.jpg)
CUSTOM ELEMENTS3. Bringing it home with
![Page 16: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/16.jpg)
Creating HTML elements
• Registered via JavaScriptvar proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function () { } }});var MyElement = document.register('my-element', { prototype: proto});
• Must contain a dash in the name
![Page 17: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/17.jpg)
Lifecycle callbacks method
• createdCallback–an instance of the element is created
• enteredViewCallback–an instance was inserted into the document
• leftViewCallback–an instance was removed
• attributeChangedCallback–an attribute of the node was added,
removed, or updated
![Page 18: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/18.jpg)
Working with custom elements
• Can be instantiated declaratively<my-element></my-element>
• or with JavaScriptdocument.body.appendChild(new MyElement());
![Page 19: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/19.jpg)
Extending HTML elements
• Can also extend existing elementsvar MegaButton = document.register('mega-button', { prototype: Object.create(HTMLButtonElement.prototype)});
• Which is used like this<button is="mega-button"></button>
![Page 20: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/20.jpg)
A brief note on FOUC
• Flash of Unstyled Content• Unresolved HTML elements–that’s why they must contain a dash–target in CSS with :unresolved
![Page 21: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/21.jpg)
SHADOW DOM1. The most awesome and most important piece
![Page 22: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/22.jpg)
What’s a Shadow DOM?
• A tree of nodes attached to a host node, but is not a child• Meant to abstract away the
presentation layer from it’s semantics
![Page 23: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/23.jpg)
How does Shadow DOM work?
• Through compositionbefore layout and rendering• The shadow tree replaces all of the
host’s content• The host’s children are pulled into
the shadow tree
![Page 24: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/24.jpg)
The two trees<!-- The main DOM tree --><div class="tweet"> ▶#document-fragment <img class="profile-picture" src="https://si0.twimg.com/profile_images/2996456104/b707959f192bba5c31c07058f91a183b_normal.png" alt="" /> <a class="author" href="https://twitter.com/SoVeryBritish">VeryBritishProblems <small class="shorthand">@SoVeryBritish</small></a> <p class="tweet-content">Watching with quiet sorrow as you receive a different haircut to the one you requested</p> <a class="time-ago" href="https://twitter.com/SoVeryBritish/status/387912080327974912">1h</a></div>
![Page 25: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/25.jpg)
The two trees<!-- The Shadow DOM tree --><div class="left-column"> <content select="img.profile-picture"></content></div><div class="right-column"><content></content></div><div class="tools"> <button class="btn-reply">Reply</button> <button class="btn-retweet">Retweet</button> <button class="btn-fav">Favorite</button></div>
![Page 26: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/26.jpg)
The two trees
.tweet
.left-column
content
.profile-picture
.right-column
content
a.author .tweet-content .time-ago
.tools
.brn-reply .btn-retweet .btn-fav
![Page 27: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/27.jpg)
Styling in the shadow
• You have control over whether styles from the host pass-through• You can also reset all styles at
insertion points• You can also target specific selected
nodes from the host with content:distributed(selector)
![Page 28: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/28.jpg)
Adding Shadow DOM via JScreatedCallback: { value: function () { // Create the shadow DOM var t = document.querySelector('#tweet-template'); this.shadowRoot = this.createShadowRoot(); this.shadowRoot.appendChild(t.content.cloneNode(true)); }}
![Page 29: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/29.jpg)
WEB COMPONENTSALTOGETHER NOW!
![Page 30: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/30.jpg)
Web Components
Custom Elements+ Shadow DOM+ Templates= Web Components
![Page 31: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/31.jpg)
Let’s model something
0
![Page 32: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/32.jpg)
What’s the markup?<oracle-card> <name>Pacifism</name> <cost>1W</cost> <img class="illustration" src="img/Pacifism.jpg" alt="" /> <types>Enchantment</types> <subtypes>Aura</subtypes> <rules> <rule><shorthand>Enchant creature</shorthand></rule> <rule>Enchanted creature can't attack or block.</rule> </rules> <flavor>For the first time in his life, Grakk felt a little warm and fuzzy inside.</flavor></oracle-card>
![Page 33: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/33.jpg)
DEMOWell, you just had to be there...
But for good measure, check my GitHub.I’ll post it there soon
![Page 34: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/34.jpg)
In conclusion
• The future of the web is awesome• With components we can
encapsulate and separate presentation from content• Web components are much easier to
reuse without inadvertent interference
![Page 35: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/35.jpg)
You can use these things today!
• Test the future of the web with Firefox Nightly and Chrome Canary• Add polyfills with Polymer to use
web components in any browser
![Page 36: Iasi code camp 12 october 2013 shadow dom - mihai bîrsan](https://reader033.vdocuments.net/reader033/viewer/2022052310/547894d5b4af9f34018b46b9/html5/thumbnails/36.jpg)
THANK YOU!PLEASE FILL YOUR REVIEW FORMS!
It’s that time when you ask me questions and I hand out prizes!