Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebComponents LT at AQ

539 views

Published on

Published in: Technology, Education
  • Be the first to comment

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

×