1. このページの目的
Web Components の Shadow DOM を使ってみる。
shadow DOM の使い方 - Web Components | MDN に書いている例を、本ページで試す。
2. 基礎知識
Shadow DOM を使うと、カプセル化された要素を作成することができる（Scoped CSS が実現できる）。
Shadow DOM: カプセル化された "Shadow" DOM ツリーを要素に紐付け、関連する機能を制御するための、一連の JavaScript API です。 Shadow DOM ツリーは、メインドキュメントの DOM とは別にレンダリングされます。こうして、要素の機能を公開せずに済み、ドキュメントの他の部分との重複を恐れることなく、スクリプト化やスタイル化できます。
（引用元：Web Components | MDN）
3. デモ
以下の白いエリア内では、<popup-info> というカスタムタグを作成して表示しています。
どのように要素が追加されているか Chrome DevTools で見てみる。
コードは、本ページのソースを表示すれば見られる。
4. 感想
- かなり面倒。Shadow DOM を素で使うのは現実的ではない？
5. Q & A
Q. Shadow DOM ではなく、普通に要素を追加すればよいのではないか？
A. Shadow DOM を使わないと、Scoped CSS が実現できない。