ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。
先取り、Shadow DOM
- カテゴリー
- JavaScript
- Web Components
全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の概念を解説します。