webcomponents lt at aq
TRANSCRIPT
![Page 1: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/1.jpg)
WebComponentsiwanaga
![Page 2: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/2.jpg)
Who am I
Working at
Twitter bot@quake_alert@quake_alert_en
Yoshihiro Iwanaga
![Page 3: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/3.jpg)
What is WebComponents?
Provides mechanismfor the declaration of markup prototype.
(W3C Working Draft)
Makes reusing and composing HTML components much easier
![Page 4: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/4.jpg)
![Page 5: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/5.jpg)
![Page 6: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/6.jpg)
The component modelfor the WebComponents
1. Templates
2. Decorators
3. Custom Elements
4. Shadow DOM
5. Imports
![Page 7: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/7.jpg)
Templates
<template id="t"> <div> <h2>デフォルトテキスト</h2> <figure> <img alt="image"> <figcaption>キャプション</figcaption> <button>イイネ!</button> </figure> </div></template>
![Page 8: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/8.jpg)
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>
![Page 9: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/9.jpg)
demo
![Page 10: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/10.jpg)
Shadow DOM
Establishes functional boundariesin document tree.
Document tree boundary
Shadow tree
![Page 11: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/11.jpg)
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>
![Page 12: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/12.jpg)
demo
![Page 13: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/13.jpg)
Wait !!How is the Style inheritance?
![Page 14: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/14.jpg)
<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
![Page 15: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/15.jpg)
demo
![Page 16: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/16.jpg)
How is the browser compatibility?
![Page 17: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/17.jpg)
Browser Compatibility
lol
![Page 18: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/18.jpg)
Frameworks
http://www.polymer-project.org/
Polymer
Brickhttp://mozilla.github.io/brick/
![Page 19: WebComponents LT at AQ](https://reader035.vdocuments.site/reader035/viewer/2022081519/554f45d1b4c90572088b564a/html5/thumbnails/19.jpg)
Thanks
@quake_alert@quake_alert_en
please follow