Date post: | 28-Nov-2014 |
Category: |
Technology |
Upload: | codecampiasi |
View: | 603 times |
Download: | 2 times |
The Shadow DOMA Talk about Web Components in HTML5
Mihai BîrsanOctober 2013
The Shadow DOMA Talk about Web Components in HTML5
Mihai BîrsanOctober 2013
Previously...
• Mutation Observers help observe changes in the DOM• The M in DOM is for Model• We can’t have models in the DOM
There is cruft in your HTML
• Modern applications like GMail
There is cruft in your HTML
• Frameworks like ExtJS
There is cruft in your HTML
• HTML can be beautiful again–Readable–Meaningful
• We can encapsulate presentation and behavior into components
Solutions from the future
1. Shadow DOM2. HTML Templates3. Custom Elements
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
TEMPLATES2. It’s nice to stamp out DOM
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>
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
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
Like regular templates, but DOM
• Very efficient–cloning with nodes, not parsing–resources are loaded late, only when
needed
CUSTOM ELEMENTS3. Bringing it home with
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
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
Working with custom elements
• Can be instantiated declaratively<my-element></my-element>
• or with JavaScriptdocument.body.appendChild(new MyElement());
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>
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
SHADOW DOM1. The most awesome and most important piece
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
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
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>
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>
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
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)
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)); }}
WEB COMPONENTSALTOGETHER NOW!
Web Components
Custom Elements+ Shadow DOM+ Templates= Web Components
Let’s model something
0
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>
DEMOWell, you just had to be there...
But for good measure, check my GitHub.I’ll post it there soon
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
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
THANK YOU!PLEASE FILL YOUR REVIEW FORMS!
It’s that time when you ask me questions and I hand out prizes!