This document discusses Web Components and their components: templates, decorators, custom elements, shadow DOM, and imports. It provides examples of using templates to insert cloned content into the DOM, and using shadow DOM to establish boundaries in the document tree and prevent CSS inheritance. It also mentions frameworks like Polymer and Brick that implement Web Components and notes varying browser compatibility for the standard.

1. WebComponents
iwanaga

2. Who am I
Working at
Twitter bot
@quake_alert
@quake_alert_en
Yoshihiro Iwanaga

3. What is WebComponents?
Provides mechanism
for the declaration of markup prototype.
(W3C Working Draft)
Makes reusing and composing
HTML components much easier 

6. The component model
for the WebComponents
1. Templates
2. Decorators
3. Custom Elements
4. Shadow DOM
5. Imports

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

8. 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>

9. demo

10. Shadow DOM
Establishes functional boundaries
in document tree.
Document tree boundary
Shadow tree

11. 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>

12. demo

13. Wait !!
How is the Style inheritance?

14. <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

15. demo

16. How is the browser compatibility?

17. Browser Compatibility
lol

18. Frameworks 
http://www.polymer-project.org/
Polymer
Brick
http://mozilla.github.io/brick/

19. Thanks
@quake_alert
@quake_alert_en
please follow