12周年記念パーティ開催! 2024/5/10(金) 19:00

先取り、Shadow DOM

全5回

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

Shadow DOMの仕様のうち「Decorator」は仕様から削除されました。(2016年9月現在)

最終回 Custom Elementsを疑似体験

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

第4回 Web Components その2

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

第3回 Web Components その1

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

第2回 Shadow DOMを体験

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

第1回 Shadow DOMが生まれた理由

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