HTML・JavaScriptの新技術「Web Components」の勉強をはじめました。学んだことを記事に残していきたいと思います。個人的な考えやメモは四角枠で囲んでいます。間違いや勘違いなどはご指摘いただけると嬉しいです。よろしくお願いします！
Web Components とは
- 以下の新たなテクノロジーの総称
- Custom Elements
- Template Tag
- Shadow DOM
- HTML Imports
1. Custom Elements
- 自分の好きな名前で好きな属性を持つHTML要素をつくることができる。
- これによりソースコードが読みやすくなる。
- いちから新たな要素をつくることもできるし、既存の標準要素をパワーアップさせることもできる。
- ブラウザに既存の要素と区別させるために要素名は「-（ハイフン）」を含む必要がある。
これまでは
div要素のidやclassを使って用途を表していたが、タグ名使って同じことができるようになる
2. Template
- HTMLのテンプレート
<template></template>で括った部分は自動ではレンダリングされない。- JavaScriptでtemplateをコピーし、テキストや画像などのリソースを埋め込んだ後にアクティベートすると、初めてロードされ、表示される。
- プレースホルダーやデータバインディング機能は無い。
div要素にvisibility: hiddenを指定して、「JavaScriptからはこのdivにアクセスできるけれどブラウザには表示されない」ことを利用したオフスクリーンDOMよりも扱いやすそう
3. Shadow DOM
- 要素を完全にカプセル化することができる。
idやclassが他とコンフリクトすることがなくなる。
- ブラウザ上での見た目は他の要素と同じだが、Shadow DOMとしてレンダリングされる。
- Google I/Oで紹介されたMaterial Designのサンプルアプリ「paper-calculator」のレンダリングを見てみると以下のような感じでカスタムエレメント
paper-calculatorのなかにshadow-rootが生成されている。
- Google I/Oで紹介されたMaterial Designのサンプルアプリ「paper-calculator」のレンダリングを見てみると以下のような感じでカスタムエレメント
- shadow-rootのなかには
"keypad"のように、idを持つ要素があることがわかるが、これらの要素にサードパーティのJavaScriptからアクセスすることはできなくなっている。
4. HTML Imports
- JavaScript、CSSファイルと同様にCustom Elements、Template Tag、Shadow DOMを駆使して書かれたHTMLファイルをインポートすることができるようになる技術。
<link rel="import" href="my-widget.html">のようにlinkタグを移植したいHTMLのheadに記述するだけで良い。 - これによりHTMLファイルやHTMLとJavaScriptでつくったウィジェットを配布・移植しやすくなる。
HTMLをC言語での
#includeみたいにインポートできればとても便利になる
初日はこれにて終了です！
次回はWeb Componentsの技術をより簡単に、便利に、クールに、使うことができるようになるGoogle製のライブラリ「Polymer」について調べようと思います。
