WebComponents LT at AQ

469 views
432 views

Published on

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

No Downloads
Views
Total views
469
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
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

×