post:2015年7月14日 06:49 update:2015年7月14日 06:52

Custom ElementsとHtml TemplateとShadow DOMとHTML Importsを全部使ったページ例

html5で追加Custom ElementsとHtml TemplateとShadow DOMとHTML Importsにめっちゃ期待してるけど複雑怪奇なので全部使ったページを作ってみた。はよIE対応はよはよはよ。chrome最新版で動作確認。
chsh-index
HTML Importsがあるから2つのファイルに分かれている。たぶんこれで全部の機能が理解できます。shadowRootのインスタンスをどこに保存するか、どうやって取得するのかで若干悩んだ。多分もっとスマートな書き方あるはず。
Custom Elements→document.registerElement(‘x-test’,{prototype:proto});
Html Template→chsh-template.htmlDefault <template id=”cells-to-repeat”>
Shadow DOM→var shadowRoot=this.createShadowRoot();
HTML Imports→<link rel=”import” href=”chsh-template.html” id=”linkNode1″>
ソースはこんな感じ。

コメントを残す

ブログオーナーにだけ送信したいメッセージはメール欄にどうぞ。名前とメール欄は任意。