7. There is cruft in your HTML
• HTML can be beautiful again
–Readable
–Meaningful
• We can encapsulate presentation
and behavior into components
8. Solutions from the future
1. Shadow DOM
2. HTML Templates
3. Custom Elements
9. 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
12. 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
13. Using templates via JS
var 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
14. Like regular templates, but DOM
• Very efficient
–cloning with nodes, not parsing
–resources are loaded late, only when
needed
16. Creating HTML elements
• Registered via JavaScript
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function () {
}
}
});
var MyElement = document.register('my-element', {
prototype: proto
});
• Must contain a dash in the name
17. 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
18. Working with custom elements
• Can be instantiated declaratively
<my-element></my-element>
• or with JavaScript
document.body.appendChild(new MyElement());
19. Extending HTML elements
• Can also extend existing elements
var MegaButton = document.register('mega-button', {
prototype: Object.create(HTMLButtonElement.prototype)
});
• Which is used like this
<button is="mega-button"></button>
20. 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
21. 1. The most awesome and most important piece
SHADOW DOM
22. 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
23. How does Shadow DOM work?
• Through composition
before layout and rendering
• The shadow tree replaces all of the
host’s content
• The host’s children are pulled into
the shadow tree
24. The two trees
<!-- The main DOM tree -->
<div class="tweet">
▶#document-fragment
<img class="profile-picture" src="https://si0.twimg.com/profile_images/2996456104/b
<a class="author" href="https://twitter.com/SoVeryBritish">VeryBritishProblems <sm
<p class="tweet-content">Watching with quiet sorrow as you receive a different hairc
<a class="time-ago" href="https://twitter.com/SoVeryBritish/status/387912080327974
</div>
25. 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>
27. 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)
28. Adding Shadow DOM via JS
createdCallback: {
value: function () {
// Create the shadow DOM
var t = document.querySelector('#tweet-template');
this.shadowRoot = this.createShadowRoot();
this.shadowRoot.appendChild(t.content.cloneNode(true));
}
}
32. 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>
33. DEMO
Well, you just had to be there...
But for good measure, check my GitHub.
I’ll post it there soon
34. 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
35. 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
36. It’s that time when you ask me questions and I hand out prizes!
THANK YOU!
PLEASE FILL YOUR REVIEW FORMS!