Web Components概要 2013/4/20 エフスタ!版
- 2. 自己紹介 白石俊平と申します。 コミュニティhtml5j管理人（会員数5000名超） HTML5とか勉強会主催（毎月一回、100名を動員） Google API Expert (HTML5) Microsoft Most Valuable Professional (IE9) Twitter: @Shumpei
- 3. おあそび スマホから: http://bit.ly/efstatoka PCの方: http://bit.ly/efstatoka1
- 4. 今日のアジェンダ Web Componentsとは何か？ Web Componentsの構成要素 テンプレート デコレータ カスタム要素 Shadow DOM Web ComponentsはWebをどう変えるか？
- 9. Web Componentsの構成要素 Web Componentsを構成する4つの要素 テンプレート デコレータ カスタム要素 Shadow DOM
- 10. HTMLテンプレート
- 12. HTMLテンプレート 現在、JavaScriptでテンプレートを実現する方法 は２つある。 文字列テンプレート テンプレートの使用前に、<img>などが評価・実行 されることはない DOMを考慮しない＝innerHTMLを使用することに なる オフスクリーンDOM <script id="tmpl1" type="text/x-handlebars-template"> <img src="..."> <script src="..."></script> </script>
- 13. HTMLテンプレート 現在、JavaScriptでテンプレートを実現する方法 は２つある。 文字列テンプレート オフスクリーンDOM DOMを持つ テンプレートの使用前であっても、<img>などが評 価・実行されてしまう <div id="tmpl" style="display:none;" hidden> <img src="..."> <script src="..."></script> </div>
- 15. HTMLテンプレートの定義方法 <template>要素を使用する。 <template>内に、通常通りHTMLを記述する <template>はレンダリングされない <body>, <head>に定義 <html> <head> <template id="t"> <div id="message"></div> </template> </head> <body></body> </html>
- 16. HTMLテンプレートを使用する contentプロパティから、内部のDOMを取得する。 <template id="t"> <div id="message"></div> </template> var tmplElem = document.getElementById('t'); var tmpl = tmplElem.content.cloneNode(); … elem.appendChild(tmpl);
- 18. デコレータ
- 23. デコレータの使用 CSS内で、decoratorプロパティを使って要素に 指定する。 /* 全てのlabel要素が「ラベル：」となる */ label { decorator: url(#labelDecorator); } <label for="name"> お名前 </label> <input id="name">
- 24. デコレータの使用 テンプレート内で<content>要素を使用して、要 素内容を挿入する箇所を指定できる。 <decorator id="labelDecorator"> <template> <!-- ここに、要素内容が挿入される --> <content></content>： </template> </decorator> <label for="name"> お名前 </label> <input id="name">
- 25. 複数の<content>要素を指定する <content>は複数指定できる。 select属性を用いて、要素内容の一部を抜きだし て挿入できる。 <decorator id="fieldRowDecorator"> <template> <div> <!-- ここに、要素内容が挿入される --> <content select="label"></content>： </div> <!-- 残りの要素はここに挿入される --> <div id="field"><content></content></div> </template> </decorator>
- 26. 複数の<content>要素を指定する /* ラベルとフィールドの組み合わせ */ .fieldRow { decorator: url(#fieldDecorator); } <div class="fieldRow"> <label for="name"> お名前 </label> <input id="name"> </div>
- 28. Advanced: デコレータ内のイベント処理 デコレータは、listen()というメソッドを使用してイベント ハンドラを登録する デコレータのコードが実行されるのは、ロード時に一度き り <decorator id="decorator-event-demo"> <script> function h(event) { alert(event.target); } this.listen( {selector: "#b", type: "click", handler: h}); </script> <template> <content></content> <button id="b">Bar</button> </template> </decorator>
- 30. カスタム要素
- 32. カスタム要素の定義 <element>要素を使用する name属性に要素名を指定する 自作要素には「x-」という接頭辞をつけなくては ならない extends属性に、継承元の要素を指定する <element name="x-fancybutton" extends="button"> <template> <!-- デコレータと同様 --> … </template> </element>
- 34. Advanced: カスタム要素のインスタンス化 カスタム要素は通常の要素と同じく、 document.createElement()でインスタンス化でき る constructor属性で、コンストラクタを生成させ ることも可能 var e = document.createElement('x-fancybutton'); <element name="x-fancybutton" extends="button" constructor="FancyButton">...</element> var fancyButton = new FancyButton();
- 35. Advanced: カスタム要素のクラス定義 コンストラクタのプロトタイプを変更して、要 素独自の振る舞いを追加する。 <element ... constructor="FancyButton"> <script> FancyButton.prototype.razzle = ... // constructor属性を使用しない場合は // 以下のコードでコンストラクタにアクセス // var FancyButton = this.generatedConstructor; </script> ... </element>
- 36. Advanced: カスタム要素のライフサイクル カスタム要素は、以下の様なライフサイクルイベントを捕 捉して処理を行える。 created attributeChanged inserted removed <element extends="time" name="x-clock"> <script> this.lifecycle({ inserted: function(){ this.startUpdatingClock(); }, removed: function() { this.stopUpdatingClock(); } }); </script> </element>
- 37. Advanced: document.register API カスタム要素を作成するためのAPI。 バージョン22以降のFirefoxが実装している。 // x-foo要素を作成 document.register('x-foo', { prototype: Object.create( HTMLParagraphElement.prototype, { firstMember: { get: function() { return foo; } }, } });
- 38. Shadow DOM
- 40. Shadow DOMの実装状況 Google ChromeにはShadow DOMが実装されて いる。 標準的な要素の多くが、Shadow DOMで実装さ れている。 video/audio/textarea/details/input...
- 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に取っ て代わられる
- 45. Advanced: Shadow DOMの動作を理解する 元のDOMツリーは、<content>要素の位置に挿入 される <element name="x-fancybutton" extends="button"> <template> <content></content> <div>...</div> </template> </element> <button is="x-fancybutton"> <span>ボタン</span> </button> <button is="x-fancybutton"> <span>ボタン</span> <div>...</div> </button>
- 46. Advanced: Shadow DOMを使う Chrome上では既に、Shadow DOMのAPIが利用 可能となっている。 element.webkitCreateShadowRoot()を用いて、 任意の要素をShadow Hostにすることができ る。
- 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);