Web Components / Shadow DOM

about:me

Hayato Ito

Software Engineer,

hayato@google.com

google.com/+HayatoIto

github.com/hayatoito

@shadow_hayato (as a Shadow DOM spec editor)

Web Components?

select component

  <select>
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
  </select>

tab component

Building a tab component

div, div, div...

tab component

  <my-tabs>
    <my-tab selected>...</my-tab>
    <my-tab>...</my-tab>
    <my-tab>...</my-tab>
  </my-tabs>

tab component

  var tabs = document.createElement('my-tabs');
  var tab1 = document.createElement('my-tab');
  var tab2 = document.createElement('my-tab');
  var tab3 = document.createElement('my-tab');
  tabs.appendChild(tab1);
  tabs.appendChild(tab2);
  tabs.appendChild(tab3);
  tab1.setAttribute('selected', true);

Web Components

Building blocks of Web Components

Shadow DOM
- DOM & style encapsulation
Custom Elements
- Create new HTML elements, extend existing DOM objects
HTML Imports
- Package and Share HTML/CSS/JS.

Mixing Components

<html>
  ...
  <body>
    <my-component>
      <style> div { color: blue; }</style>
      ...
    </my-component>
     ...
    <your-component>
      <style> div { color: red !important; }</style>
      ...
    </your-component>
  </body>
</html>

DOM - Everything is Flat

#id, .class
getElementById()
getElementsByClassName()
CSS Style

JavaScript - a Function as a Scope

  var foo = 'hello';

  function world() {
    var foo= 'world';
    console.log(foo);
  }

  world(); // (1)
  console.log(foo);   // (2)

Encapsulate DOM

Shadow DOM re-defines Elements

Any element can have an associated ordered list of zero or more node trees.

From Shadow DOM Specification - http://w3c.github.io/webcomponents/spec/shadow/#concepts

Shadow Trees

Tree of Trees

Composed Tree

<video>

  <video controls>
     <source src=".../Chrome_ImF.mp4" />
  </video>

Creating Shadow DOM

<div id="host">
  <h1>My Title</h1>
</div>

var host = document.querySelector('#host');
var shadow = host.createShadowRoot();
shadow.innerHTML = '<h1>You got replaced!</h1>';

<div id="host">
    <h1>You got replaced!</h1>
</div>

Shadow DOM: Insertion points

<div id="host">
  <h1 class="title">My Title</h1>
  <div>...amazing description...</div>
</div>

<content select=".title"></content>
<div>You got enhanced</div>
<content select="div"></content>

<h1 class="title">My Title</h1>
<div>You got enhanced</div>
<div>...amazing description...</div>

Shadow DOM Visualizer

html5-demos.com/shadowdom-visualizer

Custom Elements

Creating Custom Elements

var XFooProto = Object.create(HTMLElement.prototype);

// Setup optional lifecycle callbacks: ready, inserted, removed.
XFooProto.readyCallback = function() {
  this.textContent = "I'm an x-foo!";
};

// Define its JS API.
XFooProto.foo = function() { alert('foo() called'); };

var XFoo = document.register('x-foo', {prototype: XFooProto});
//var xFoo = new XFoo();
//var xFoo = document.createElement('x-foo');

Using a Custom Element

By declaring it

<x-foo></x-foo>

By creating DOM in JavaScript

var elem = document.createElement('x-foo');
elem.addEventListener('click', function(e) {
  e.target.foo(); // alert 'foo() called'.
});

By using new

var elem = new XFoo();
document.body.appendChild(elem);

HTML Imports

<html>
  <head>
    <link rel="import" href="x-foo.html">
  </head>
  <body>
    <x-foo></x-foo> <!-- Element definition is in x-foo.html -->
  </body>
</html>

Reusing other components

<link rel="import" href="x-toolbar.html">
<link rel="import" href="menu-item.html">
// Define awesome-menu using x-toolbar and menu-item.
  ...
  <template>
    <x-toolbar responsive="true">
      <menu-item src="images/do.png" selected>Do</menu-item>
      <menu-item src="images/re.png">Re</menu-item>
      <menu-item src="images/mi.png">Mi</menu-item>
    <x-toolbar>
  </template>
  ...

<link rel="import" href="awesome-menu.html">
<awesome-menu></awesome-menu>

Polymer

polymer-project.org

Polymer

Elements
Core
Polyfill

Everything is an element

flexbox layout...using DOM

<polymer-flex-layout vertical iscontainer>
  <div>Header</div>
  <div flex>Body</div>
  <div>Footer</div>
</polymer-flex-layout>

Header

Body

Footer

Polymer elements

non-visual utility elements

Layout

<polymer-layout>

<polymer-flex-layout>

<polymer-grid-layout>

View

<polymer-media-query>

<polymer-page>

Services / libs

<polymer-shared-lib>

Data

<polymer-localstorage>

<polymer-xhr>

<polymer-jsonp>

<polymer-file>

<polymer-meta>

Behavior / interaction

<polymer-signals>

<polymer-selector>

Polymer UI elements

visual elements

<polymer-ui-accordion>

<polymer-ui-animated-pages>

<polymer-ui-overlay>

<polymer-ui-card> demo

<polymer-ui-sidebar-menu> demo

<polymer-ui-tabs> demo

<polymer-ui-toggle-button> demo

<polymer-ui-theme-aware>

...

Create Web Components with Polymer.

Create

<polymer-element name="my-input" constructor="MyInput" noscript>
  <!-- Note: Polymer creates Shadow DOM from the first <template>. -->
  <template>
    <style>input { color: orange; }</style>
    <input type="text">
  </template>
</polymer-element>

Use

    <my-input></my-input>

    var myInput = document.createElement('my-input');
    // var myInput = new MyInput();

Real-world examples

chromestatus.com/features

A Collection of Custome Elements

customelements.io

Polymer Sandbox

www.polymer-project.org/tools/sandbox/

Web Apps: A Collection of Web Components

<html>
  <head>
     <link rel="import" href="gmail-app.html">
  </head>
  <body>
    <google-header></google-header>
    <gmail-app>
      <google-hangout></google-hangout>
      <google-mail></google-mail>
    </gmail-app>
  </body>
</html>

Resources

Web Components Resources - ebidel.github.io/webcomponents/
Shadow DOM - github.io/w3c/webcomponents/specs/shadow/
Polymer - www.polymer-project.org
Me - Ask @shadow_hayato

Thank You!

アンケートにご協力ください

http://bit.ly/html5C201311

アンケートへ答えた方へもれなく記念品プレゼント。
アンケートの完了画面を1F受付にてご提示ください

[お知らせ] 最終スペシャルセッションの開始時刻が変更になりました
(18:30 -> 18:20)。10分早まっています。ご注意ください。