1. Use Chrome Canary
2. Enable yourself:
   • Enable experimental WebKit features in about:flags
   • Enable experimental JavaScript in about:flags
   • Enable Show Shadow DOM in DevTools

You don't have Shadow DOM enabled

You don't have Object.observe()

You don't have MutationObservers

Eric Bidelman - Team

plus.ericbidelman.com

@ebidel

ericbidelman.com

html5rocks.com

O'Reilly book - "Using the HTML5 Filesystem API"

<gangnam-style></gangnam-style>

( hover over the bar )

<my-megabutton>Mega button</my-megabutton>

Mega button

Not everyone agrees agreed.

• jeffcroft.com/blog/2010/aug/02/term-html5/
  • paulirish.com/html5istherightname.html
• isgeolocationpartofhtml5.com

Web Components have the same identity crisis.

• <template> - Scaffold/Blueprint
  • inert chunks of clonable DOM. Can be activated for later use (e.g MDV)
• Custom elements - Toolbelt
  • create new HTML elements - expand HTML's existing vocabulary.
  • extend existing DOM objects with new imperative APIs
• Shadow DOM - Mortar/glue
  • building blocks for encapsulation & boundaries inside of DOM

• Style encapsulation
• Knowledge into app's state
  • DOM changes: MutationObserver
  • Model changes: Object.observe()
• CSS variables, calc()

A collection new capabilities in the browser

Method #1: "offscreen" DOM using [hidden] or display:none

<div id="mytemplate" hidden>
  <img src="logo.png">
  <div class="comment"></div>
</div>

1. We're working directly w/ DOM.
2. Resources are still loaded (e.g. that <img>)
3. Other side-effects like URLs not being fully composed yet.
4. Style and theming is painful.
   • embedding page must scope all its CSS to #mytemplate.
   • no guarantees on future naming collisions.

Method #2: manipulating markup as string. Overload <script>:

<script id="mytemplate" type="text/x-handlebars-template">
  <img src="logo.png">
  <div class="comment"></div>
</script>

1. encourages run-time string parsing (via .innerHTML)
   • may include user-supplied data → XSS attacks.

Examples: handlebars.js, John Resig's micro-template script

Contains inert markup intended to be used later:

<template id="mytemplate">
  <img src="">
  <div class="comment"></div>
</template>

1. We're working directly w/ DOM again.
2. Parsed, not rendered
   • <script>s don't run, images aren't loaded, media doesn't play, etc.

• Appending inert DOM to a node makes it go "live":

var t = document.querySelector('#mytemplate');
t.content.querySelector('img').src = 'http://...';
document.body.appendChild(t.content.cloneNode(true));

interface HTMLTemplateElement : HTMLElement {
  attribute DocumentFragment content;
}

Is complex! Let's cover the basics:

• Concept of Shadow DOM
• Creating Shadow DOM
• Insertion Points
• Styling
  • encapsulated styles & shadow boundaries
  • styling hooks: custom pseudo elements
  • @host at-rule

• DOM nodes can already "host" hidden DOM.
• It can't be accessed traversing the DOM.

So...browser vendor's have been holding out on us!

<div id="host">
  <h1>My Title</h1>
  <h2>My Subtitle</h2>
  <div>...other content...</div>
</div>

var host = document.querySelector('#host');
var shadow = host.createShadowRoot();
shadow.innerHTML = '<h2>Yo, you got replaced!</h2>' +
                   '<div>by my awesome content</div>';
// host.shadowRoot;

<style>s defined in ShadowRoot are scoped.

var shadow = document.querySelector('#host').createShadowRoot();
shadow.innerHTML = '<style>h2 { color: red; }</style>' + 
                   '<h2>Yo, you got replaced!</h2>' + 
                   '<div>by my awesome content</div>';

input[type=range].custom {
  -webkit-appearance: none;
  background-color: red;
}
input[type=range].custom::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: blue;
  width: 10px;
  height: 40px;
}

List of pseudo elements: WebKit, FF

Widget author can designate certain elements be styleable by outsiders.

<style>
  #host::x-slider-thumb {
    background-color: blue;
  }
</style>
<div id="host"></div>
<script>
document.querySelector('#host').createShadowRoot().innerHTML = '<div>' +
  '<div pseudo="x-slider-thumb"></div>' + 
'</div>';
</script>

• Note: name needs to be prefixed with "x-"
  • string name creates association with element in shadow tree
• Can't access these elements from outside JS, but can style them!

Widget author includes variable placeholders:

button {
  color: var(button-text-color);
  font: var(button-font);
}

Widget embedder applies styles to the element:

#host {
  var-button-text-color: green;
  var-button-font: "Comic Sans MS", "Comic Sans", cursive;
}

DEMO

<div id="host">
  <h1>My Title</h1>
  <h2>My Subtitle</h2>
  <div>...other content...</div>
</div>

that guy rendered as:

<div id="host">
  #shadow-root
    <style>h2 {color: red;}</style>
    <h2>Yo, you got replaced!</h2>
    <div>by my awesome content</div>
</div>

...everything was replaced when we attached the shadow DOM

• Defined in DOM4 ( Yep. We're on DOM4! )
• Observers, not listeners
  • triggered by DOM changes rather than events (e.g. oninput, click)
• Callback triggered at the end of DOM modifications.
  • provided a list of all changes (MutationRecords)
• Replacement for MutationEvent performance / stability bottlenecks.
• Availability: Chrome, Safari, FF
• Who? JS Framework authors, extension developers

var observer = new MutationObserver(function(mutations, observer) {
  mutations.forEach(function(record) {
    for (var i = 0, node; node = record.addedNodes[i]; i++) {
      console.log(node);
    }
  });
});

observer.observe(el, {
  childList: true,      // include childNode insertion/removals
  //subtree: true,        // observe the subtree root at el
  //characterData: true, // include textContent changes
  //attribute: true      // include changes to attributes within the subtree
});

// observer.disconnect() // Stop observations

MutationEvent

• Deprecated in DOM Events spec
• Adding listeners degrades app performance by 1.5-7x!
  • slow because of event propagation and synchronous nature
  • fire too often: every single change
  • removing listener(s) doesn't reverse the damage
• Inconsistencies with browser implementations.

Don't use Mutation Events!

The AngularJS team experimented with a prototype build of Chromium:

20-40x faster!

<div id="example">
<ul>
  <template iterate>
    <li>{{ name }}
      <ul><template iterate="skills"><li>...</li></template></ul>
    </li>
  </template>
</ul>
</div>
<script>
document.querySelector('#example').model = [
  {name: 'Sally', skills: ['carpentry']}, 
  {name: 'Helen', skills: ['weaving', 'omnipotence']}
];
</script>

Play with it today: code.google.com/p/mdv/

1. Templates (<template>)
2. Shadow DOM (@host, custom pseudo elements, styling hooks)
3. Mutation Observers, Object.observe()

WE DO :)

Define a declarative "API" using insertion points:

<element name="my-tabs">
  <template>
    <style>...</style>
    <content select="hgroup:first-child"></content>
  </template>
</element>

Include and use it:

<link rel="import" href="my-tabs.html">
<my-tabs>
  <hgroup>
    <h2>Title</h2>
    ...
  </hgroup>
</my-tabs>

<element name="my-megabutton" extends="button" constructor="MegaButton">
  <template>
    <button><content></content></button>
  </template>
  <script>
    MegaButton.prototype = {
      megaClick: function(e) {
        play('moo.mp3');
      }
    };
  </script>
</element>

Use it:

<link rel="import" href="my-megabutton.html">
<my-megabutton>Mega button</my-megabutton>

<my-megabutton>Mega button</my-megabutton>

Mega button

<my-meme src="images/beaches.jpg">
  <h1 contenteditable>Stay classy</h1>
  <h2 contenteditable>Web!</h2>
</my-meme>

DEMO

<my-tab>
  <h2>One</h2>
  <section>
    Code to instantiate this component:
    <pre></pre>
  </section>
  <h2>Two is bigger than three</h2>
  <section>
    Second panel hotness
  </section>
</my-tab>

<tabs ng-app="tabs">
  <pane title="One">
    Code to instantiate this component:
    <pre></pre>
  </pane>
  <pane title="Two is bigger than three">
    Second panel hotness.
  </pane>
</tabs>

DEMO

1. Use Chrome Canary
2. Enable yourself:
   • Enable experimental WebKit features in about:flags
   • Enable experimental JavaScript in about:flags
   • Enable Show Shadow DOM in DevTools

Polyfills:

• Toolkitchen polyfills
• Mozilla's x-tags Custom Elements Polyfill (works on all browsers)
• MDV - code.google.com/p/mdv/