Web Componentsの一要素であるShadow DOM.
Shadow DOMを有効に利用するためには、compositionの概念がとても重要。
このcompositionについて解説してみた。
Shadow DOMとは
web標準に颯爽と現れた期待の新人 (新人ではない)
切り離されたDOM、のようなもの.
切り離されているので、CSSの影響を受けないし、アクセスもできない.
切り離されているので、独自のCSSをもつしそれは外部へ出ていかない.
compositionとは
組み立て、構成、合成のような意味の英語.
複数の個別要素をがっちゃんこして新しい機能get!なノリ
DOMにおけるcomposition
HTML/DOMでは、我々は日常的に、無意識のうちにcomposition, 組み立てをしている。
別々の機能を持つ要素を組み立ててパワーアップする、次が好例
\<ul> + \<li> -> 番号無しリスト
\<ol> + \<li> -> 番号付きリスト
組み立ての表記法は単純で、親子関係.
HTMLはcompositionをしまくることで個別機能をサービスに組み立てている(composition)とみることができる.
Shadow DOMにおけるcomposition
切り離されたDOMは、名前空間の問題などを解決してくれる。
しかし、完全に切り離されていると不便極まりない。
そこで出てくるのがcomposition, 組み立て.
compositionの概念により、別々のDOMを組み立ててより優れた機能を得るのだ！
Shadow DOMをもつ要素を\<original-card>とする。\<original-card>はカード型の見た目を提供してくれるとする.
\<original-card>のなかにボタンを付ける、つまり\<original-card>\<button>をcompositionすれば、さらによい働きをしてくれるはず！
しかし、ShadowDOMは本体のDOM (LightDOM) と隔離されているので、単純に次のように書いてもcompositionできない…
<original-card> <button>push!</button> <original-card>
そこで登場するのがslot要素。slot要素はShadow DOM内で利用する要素.
Shadow DOMを作る際に
<power-card> <p>私に力を分けてくれ！</p> <slot></slot> </power-card>
のようにしておくと、LightDOMとcomposition可能になるのだ！
つまり、
// LightDOM <power-card> <button>OK!</button> </power-card>
と書くと、Shadow DOMとcompositionされて
<power-card> <p>私に力を分けてくれ！</p> <button>OK！</button> <power-card>
のように働いてくれるのである！
これ便利か？と一瞬思うが、実はとても便利。
ShadowDOMはLightDOMと切り離されているので、CSSが奇麗。
そしてpower-cardは単体で機能するので簡単にライブラリ化できる。
この要素に好きな要素を一瞬でcompositionできるんですよ、これはすごい.
もし先の元気ボタンにNOをさらにつけたかったら、
// LightDOM <power-card> <button>OK!</button> <button>NO</button> </power-card>
と書くだけで、compositionされた後には
<power-card> <p>私に力を分けてくれ！</p> <button>OK!</button> <button>NO</button> <power-card>
のようになっている。
