シャドウDOM

シャドウ DOM の使用 - Web API | MDN

シャドウホスト: シャドウ DOM が取り付けられた、通常の DOM ノード

シャドウツリー: シャドウ DOM の中にある DOM ツリー

シャドウ境界: シャドウ DOM と通常の DOM の境界

シャドウルート: シャドウツリーの根ノード

code:js

const shadow = host.attachShadow({ mode: "open" }); //

https://developer.mozilla.org/ja/docs/Web/API/Web_components/Using_shadow_DOM/shadowdom.svg

https://gyazo.com/bf0120e56dcf1f4bf4431d0d0f925f05

🤖要約：

シャドウDOMは、カスタム要素の内部実装を外部のJavaScriptやCSSから隔離することで、安全なカプセル化を実現する技術。

JavaScriptで動的に生成する方法（attachShadow()）と、HTMLテンプレートで宣言的に定義する方法（<template shadowrootmode>）があり、CSSもシャドウDOM内でのみ有効。

カスタム要素は自身がシャドウホストとなり、内部にSVGやHTMLを構築でき、再利用性とスタイルの安全性を両立できる。