More Related Content
Similar to Web Components概要 2013/4/20 エフスタ!版
Similar to Web Components概要 2013/4/20 エフスタ!版 (20)
More from Shumpei Shiraishi
More from Shumpei Shiraishi (20)
Web Components概要 2013/4/20 エフスタ!版
- 42. Advanced:
Shadow DOMの動作を理解する
Shadow DOMを使用した要素(Shadow Host)
の「内側」には、2つのDOMツリーがある。
<element name="x-fancybutton"
extends="button">
<template>
<content></content>
<div>...</div>
</template>
</element>
<button is="x-fancybutton">
<span>ボタン</span>
</button>
カスタム要素の定義
に含まれるDOMツ
リー。
こちらのツリーは開
発者の目に見えない。
(Shadow DOM)
カスタム要素内に入
れ子にしたDOMツ
リー。
こちらのツリーは、
Shadow DOMに取っ
て代わられる
- 47. Advanced:
Shadow DOMを使う
以下のコードを、Shadow DOM APIを使用して
整形する。
<!DOCTYPE html>
<div id="shadowHost">
もともとあったDOMツリー
</div>
<div id="shadowSubtree">
<style scoped>
#origTree { color: red; }
</style>
<h1>Shadow DOM Subtree</h1>
<div id="origTree">
<content></content>
</div>
</div>
- 48. Advanced:
Shadow DOMを使う
// Shadow Hostとなる要素を取得
var shadowHost = document.getElementById('shadowHost');
// Shadow Hostに変換
// この時点で、元のDOMツリーは一旦非表示に
var shadowRoot = shadowHost.webkitCreateShadowRoot();
// Shadow DOM サブツリーになる要素
var shadowSubtree = document.getElementById('shadowSubtree');
// Shadow DOM サブツリーとして指定
// 表示されるのはこちらの要素になる。
// <content>要素の部分に、もとのDOMツリーが表示される
shadowRoot.appendChild(shadowSubtree);