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!