Your SlideShare is downloading. ×
0
The Shadow DOM
A Talk about Web Components in HTML5
Mihai Bîrsan
October 2013
The Shadow DOM
A Talk about Web Components in HTML5
Mihai Bîrsan
October 2013
Previously...
• Mutation Observers help observe
changes in the DOM
• The M in DOM is for Model
• We can’t have models in t...
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 beh...
Solutions from the future
1. Shadow DOM
2. HTML Templates
3. Custom Elements
Warning!
• We’re about to talk about The Edge!
• The Edge is bound to change rapidly
• DO NOT use in production

• Polyfil...
2. It’s nice to stamp out DOM

TEMPLATES
Defining templates
<template id="tweet-template">
<div class="tweet">
<img class="profile-picture" src="" alt="" />
<a cla...
Like regular templates, but DOM
• “inert” DOM tree:
parsed but not interpreted
–no images or stylesheets loaded
–no script...
Using templates via JS
var t = document.querySelector('#tweet-template');
tweets.forEach(function (myTweet) {
var tweetNod...
Like regular templates, but DOM
• Very efficient
–cloning with nodes, not parsing
–resources are loaded late, only when
ne...
3. Bringing it home with

CUSTOM ELEMENTS
Creating HTML elements
• Registered via JavaScript
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
v...
Lifecycle callbacks method
• createdCallback
–an instance of the element is created
• enteredViewCallback
–an instance was...
Working with custom elements
• Can be instantiated declaratively
<my-element></my-element>

• or with JavaScript
document....
Extending HTML elements
• Can also extend existing elements
var MegaButton = document.register('mega-button', {
prototype:...
A brief note on FOUC
• Flash of Unstyled Content
• Unresolved HTML elements
–that’s why they must contain a dash
–target i...
1. The most awesome and most important piece

SHADOW DOM
What’s a Shadow DOM?
• A tree of nodes attached to a host
node, but is not a child
• Meant to abstract away the
presentati...
How does Shadow DOM work?
• Through composition
before layout and rendering
• The shadow tree replaces all of the
host’s c...
The two trees

<!-- The main DOM tree -->
<div class="tweet">
▶#document-fragment
<img class="profile-picture" src="https:...
The two trees
<!-- The Shadow DOM tree -->
<div class="left-column">
<content select="img.profile-picture"></content>
</di...
The two trees
.tweet

.left-column

.right-column

content

content

.brn-reply

.tweet-content

.time-ago

.profile-pictu...
Styling in the shadow
• You have control over whether styles
from the host pass-through
• You can also reset all styles at...
Adding Shadow DOM via JS
createdCallback: {
value: function () {
// Create the shadow DOM
var t = document.querySelector('...
ALTOGETHER NOW!

WEB COMPONENTS
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" a...
DEMO
Well, 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 conte...
You can use these things today!
• Test the future of the web with
Firefox Nightly and Chrome Canary
• Add polyfills with P...
It’s that time when you ask me questions and I hand out prizes!

THANK YOU!
PLEASE FILL YOUR REVIEW FORMS!
Iasi code camp 12 october 2013   shadow dom - mihai bîrsan
Upcoming SlideShare
Loading in...5
×

Iasi code camp 12 october 2013 shadow dom - mihai bîrsan

420

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
420
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Iasi code camp 12 october 2013 shadow dom - mihai bîrsan"

  1. 1. The Shadow DOM A Talk about Web Components in HTML5 Mihai Bîrsan October 2013
  2. 2. The Shadow DOM A Talk about Web Components in HTML5 Mihai Bîrsan October 2013
  3. 3. Previously... • Mutation Observers help observe changes in the DOM • The M in DOM is for Model • We can’t have models in the DOM
  4. 4. There is cruft in your HTML • Modern applications like GMail
  5. 5. There is cruft in your HTML • Frameworks like ExtJS
  6. 6. There is cruft in your HTML • HTML can be beautiful again –Readable –Meaningful • We can encapsulate presentation and behavior into components
  7. 7. Solutions from the future 1. Shadow DOM 2. HTML Templates 3. Custom Elements
  8. 8. 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
  9. 9. 2. It’s nice to stamp out DOM TEMPLATES
  10. 10. 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>
  11. 11. 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
  12. 12. 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
  13. 13. Like regular templates, but DOM • Very efficient –cloning with nodes, not parsing –resources are loaded late, only when needed
  14. 14. 3. Bringing it home with CUSTOM ELEMENTS
  15. 15. 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
  16. 16. 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
  17. 17. Working with custom elements • Can be instantiated declaratively <my-element></my-element> • or with JavaScript document.body.appendChild(new MyElement());
  18. 18. 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>
  19. 19. 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
  20. 20. 1. The most awesome and most important piece SHADOW DOM
  21. 21. 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
  22. 22. 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
  23. 23. 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>
  24. 24. 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>
  25. 25. The two trees .tweet .left-column .right-column content content .brn-reply .tweet-content .time-ago .profile-picture a.author .tools .btn-retweet .btn-fav
  26. 26. 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)
  27. 27. 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)); } }
  28. 28. ALTOGETHER NOW! WEB COMPONENTS
  29. 29. Web Components  Custom Elements + Shadow DOM + Templates = Web Components
  30. 30. Let’s model something 0
  31. 31. 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>
  32. 32. DEMO Well, you just had to be there... But for good measure, check my GitHub. I’ll post it there soon
  33. 33. 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
  34. 34. 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
  35. 35. It’s that time when you ask me questions and I hand out prizes! THANK YOU! PLEASE FILL YOUR REVIEW FORMS!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×