Shadow DOMとは、複雑化するWebアプリケーション開発のための仕様のひとつ。Webアプリの設計の考え方に与える影響が大きいと思われるShadow DOMの概念から実装例までを解説します。
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の概念を解説します。