WebComponents LT at AQ
-
Upload
yoshihiro-iwanaga -
Category
Technology
-
view
232 -
download
3
Transcript of WebComponents LT at AQ
WebComponentsiwanaga
Who am I
Working at
Twitter bot@quake_alert@quake_alert_en
Yoshihiro Iwanaga
What is WebComponents?
Provides mechanismfor the declaration of markup prototype.
(W3C Working Draft)
Makes reusing and composing HTML components much easier
The component modelfor 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>イイネ!</button> </figure> </div></template>
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>
demo
Shadow DOM
Establishes functional boundariesin document tree.
Document tree boundary
Shadow tree
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>
demo
Wait !!How is the Style inheritance?
<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
demo
How is the browser compatibility?
Browser Compatibility
lol
Frameworks
http://www.polymer-project.org/
Polymer
Brickhttp://mozilla.github.io/brick/
Thanks
@quake_alert@quake_alert_en
please follow