WebComponents
iwanaga
Who am I
Working at
Twitter bot
@quake_alert
@quake_alert_en
Yoshihiro Iwanaga
What is WebComponents?
Provides mechanism
for the declaration of markup prototype.
(W3C Working Draft)
Makes reusing and c...
The component model
for 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>イイ...
insert template to DOM
var t = document.getElementById('t');
var clone = t.content.cloneNode(true);
clone.querySelector('h...
demo
Shadow DOM
Establishes functional boundaries
in document tree.
Document tree boundary
Shadow tree
Shadow DOM
<div id="target"></div>
<script>
document.addEventListener("DOMContentLoaded", function(){
/* not supported */
...
demo
Wait !!
How is the Style inheritance?
<script>
document.addEventListener("DOMContentLoaded", function(){
/* not supported */
//var shadow = document.getElementB...
demo
How is the browser compatibility?
Browser Compatibility
lol
Frameworks 
http://www.polymer-project.org/
Polymer
Brick
http://mozilla.github.io/brick/
Thanks
@quake_alert
@quake_alert_en
please follow
WebComponents LT at AQ
WebComponents LT at AQ
Upcoming SlideShare
Loading in...5
×

WebComponents LT at AQ

287

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
287
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WebComponents LT at AQ

  1. 1. WebComponents iwanaga
  2. 2. Who am I Working at Twitter bot @quake_alert @quake_alert_en Yoshihiro Iwanaga
  3. 3. What is WebComponents? Provides mechanism for the declaration of markup prototype. (W3C Working Draft) Makes reusing and composing HTML components much easier 
  4. 4. The component model for the WebComponents 1. Templates 2. Decorators 3. Custom Elements 4. Shadow DOM 5. Imports
  5. 5. Templates <template id="t"> <div> <h2>デフォルトテキスト</h2> <figure> <img alt="image"> <figcaption>キャプション</figcaption> <button>イイネ!</button> </figure> </div> </template>
  6. 6. 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>
  7. 7. demo
  8. 8. Shadow DOM Establishes functional boundaries in document tree. Document tree boundary Shadow tree
  9. 9. 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>
  10. 10. demo
  11. 11. Wait !! How is the Style inheritance?
  12. 12. <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
  13. 13. demo
  14. 14. How is the browser compatibility?
  15. 15. Browser Compatibility lol
  16. 16. Frameworks  http://www.polymer-project.org/ Polymer Brick http://mozilla.github.io/brick/
  17. 17. Thanks @quake_alert @quake_alert_en please follow
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×