Google Chrome拡張機能(Chrome Extension)のContent Scriptなどを使用すると、既存ページに対して新たなDOM要素を追加することができます。
しかし追加したDOMが既存サイトのCSSから影響を受けたり、また逆に追加したDOMが既存サイトのCSSを上書きしたりとお互いに干渉して影響を及ぼしてしまうことがあります。
そんなときにShadow DOMという技術を使用すると干渉を防ぐことができます。
単純にShadow DOMを使う場合は特に難しいことはありませんが、React+Chakra UIというスキルセットでShadow DOMを使用する場合は少し工夫が必要です。
本記事ではReact+Chakra UIをShadow DOM内で使う方法を紹介します。
この記事でできること
- React+Chakra UIをShadow DOM内で使用する
目次
Shadow DOMとは？
Shadow DOMは何をするものなのかをざっくり表すと、
- カプセル化したDOMを構築するもの
- 通常DOMとは別スコープのDOMを構築するもの
という感じになります。
DOMがカプセル化されスコープが分離されることで、CSSが通常DOMとShadow DOMで干渉しないようになります。
冒頭に書いたようにブラウザ拡張機能などで新たなDOMを埋め込みたい場合などに最適です。
Shadow DOMの詳細については本記事では割愛します。
気になる方は参考リンクを見てみると良いかも知れません。
参考リンク
MDN Web Docs
シャドウ DOM の使用 – Web API | MDN
カスタム要素の重要な側面の一つがカプセル化です。なぜなら、カスタム要素は定義上、再利用可能な機能の一部であり、任意のウェブページにドロップして動作させることが期…
実装
本記事の本題。
React+Chakra UIを使用したDOMをShadow DOMとして構築する実装です。
