WebComponents LT at AQ
?Download as PPTX, PDF?
1 like?622 views
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.
WebComponents LT at AQ
- 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
- 8. insert template to DOM var t = document.getElementById('t'); var clone = t.content.cloneNode(true); clone.querySelector('h2').textContent = 'テキスト'; clone.querySelector('img').src = /slideshow/20130829-webcomponentslt/25720073/& 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=/slideshow/20130829-webcomponentslt/25720073/"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=/slideshow/20130829-webcomponentslt/25720073/"image.jpg">& }, false); </script> Preventing the CSS inheritance
- 15. demo
- 16. How is the browser compatibility?