WebComponents LT at AQ

Transcript

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 J
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 J http://www.polymer-project.org/ Polymer Brick http://mozilla.github.io/brick/
19. Thanks @quake_alert! @quake_alert_en please  follow