未来・次世代
先取り、Shadow DOM
5
Shadow DOMの仕様のうち「Decorator」は仕様から削除されました。(2016年9月現在)

ブラウザに実装されていないため実際の挙動を確認できないWeb Componentsですが、Polyfillを用いて疑似体験ができます。デモとそのソースコードを見ながら、どのような実装になっているか解説します。

山田 順久
山田 順久 | フロントエンド・エンジニア

その1ではWeb Componentsの4つの柱のうち、「Templete」と「Decorator」を紹介しました。今回は最後のひとつ実装者が要素を定義できるCustom Elementsを解説します。

山田 順久
山田 順久 | フロントエンド・エンジニア

今回はWeb Componentsを構成する「Templete」と「Decorator」の概念と仕組みを紹介します。Shadow DOMもこのWeb Componentsの1つの柱であり、今回紹介する2つの概念と深く関わっています。

山田 順久
山田 順久 | フロントエンド・エンジニア

今回はShadow DOMのデモで実装方法などを体験してみましょう。実際にどんなことに使えそうかイメージしやすくなると思います。

山田 順久
山田 順久 | フロントエンド・エンジニア

このシリーズではShadow DOMのコンセプトから実装例まで解説します。第1回目は、なぜShadow DOMという考え方が必要になってきたのか?という背景と、Shadow DOMの概念を解説します。

山田 順久
山田 順久 | フロントエンド・エンジニア