WebComponentsiwanaga

Who am I

Working at

Twitter bot@quake_alert@quake_alert_en

Yoshihiro Iwanaga

What is WebComponents?

Provides mechanismfor the declaration of markup prototype.

(W3C Working Draft)

Makes reusing and composing HTML components much easier

The component modelfor the WebComponents

1. Templates

2. Decorators

3. Custom Elements

4. Shadow DOM

5. Imports

Templates

<template id="t">  <div>    <h2>デフォルトテキスト</h2>    <figure>      <img alt="image">      <figcaption>キャプション</figcaption>      <button>イイネ！</button>    </figure>  </div></template>

insert template to DOM

var t = document.getElementById('t');var clone = t.content.cloneNode(true);clone.querySelector('h2').textContent = 'テキスト ';clone.querySelector('img').src = 'image.png';clone.querySelector('figcaption').textContent = 'キャプション ';document.body.appendChild(clone);

<template id="t">  <div>    <h2>デフォルトテキスト</h2>    <figure>      <img alt="image">      <figcaption>キャプション</figcaption>      <button>イイネ！</button>    </figure>  </div></template>

demo

Shadow DOM

Establishes functional boundariesin document tree.

Document tree boundary

Shadow tree

Shadow DOM<div id="target"></div>

<script> document.addEventListener("DOMContentLoaded", function(){ /* not supported */ //var shadow = document.getElementById("target”) .createShadowRoot();

/* deprecated. Webkit Only */ //var shadow = new WebKitShadowRoot( document.getElementById("target"));

/* Webkit Only */ var shadow = document.getElementById("target") .webkitCreateShadowRoot(); shadow.innerHTML = '<h2>this is shadow tree</h2>' + '<img src="image.jpg">'; }, false);</script>

demo

Wait !!How is the Style inheritance?

<script> document.addEventListener("DOMContentLoaded", function(){ /* not supported */ //var shadow = document.getElementById("target”) .createShadowRoot();

/* Webkit Only */ var shadow = document.getElementById("target") .webkitCreateShadowRoot();

/* resetStyleInheritance */

shadow.resetStyleInheritance = true;

shadow.innerHTML = '<h2>this is shadow tree</h2>' + '<img src="image.jpg">'; }, false);</script>

Preventing the CSS inheritance

demo

How is the browser compatibility?

Browser Compatibility

lol

Frameworks

http://www.polymer-project.org/

Polymer

Brickhttp://mozilla.github.io/brick/

Thanks

@quake_alert@quake_alert_en

please follow