shadow-root 不是 html 标签，须用 javascript 的 attachshadow() 创建；mode 仅支持 'open' 或 'closed'；建议在 custom element constructor 中创建以避免渲染闪烁；样式隔离非绝对，继承与选择器有特定规则。
shadow-root 不是 HTML 文档结构中的“标签”，它不能像 <div> 那样直接写在 HTML 文件里。这是个常见误解——很多人搜“shadow-root 标签”结果却配不上实际用法，因为根本不存在 <code><shadow-root></shadow-root> 这种写法。
为什么不能直接写 <shadow-root></shadow-root>
Shadow DOM 的根节点（即 shadow-root）是通过 JavaScript 方法 attachShadow() 创建的，属于运行时生成的 DOM 结构，不是可声明的 HTML 元素。浏览器解析 HTML 时完全忽略任何手动写的 <shadow-root></shadow-root>，也不会报错，只是当普通未知标签处理（变成一个空的 HTMLUnknownElement）。
- 你写
<shadow-root><p>hello</p></shadow-root>，DOM 中只会看到一个没样式、没功能的空壳节点 - 真正生效的 shadow root 必须由
element.attachShadow({ mode: 'open' })返回并挂载 - 只有在 DevTools 的 Elements 面板中展开自定义元素时，才会看到标记为
#shadow-root (open)的灰色折叠节点
attachShadow() 的 mode 参数怎么选
创建 shadow root 时必须传 { mode: 'open' } 或 { mode: 'closed' }，这个选择直接影响调试和第三方脚本访问能力：
-
mode: 'open'：最常用。可通过el.shadowRoot直接读取，DevTools 可见，CSS 可穿透（如my-el::part(foo)或my-el::slotted(*)） -
mode: 'closed'：el.shadowRoot返回null，无法从外部 JS 访问内部结构，但也不能阻止用户在 DevTools 中手动执行el.attachShadow({ mode: 'open' })强行覆盖（仅防误操作，不防有意绕过） - 没有
mode: 'none'或其他值，传错会抛TypeError: Failed to execute 'attachShadow' on 'Element'
封装自定义元素时，shadow-root 必须在 constructor 里创建吗
不是必须，但强烈建议在 constructor 中调用 attachShadow()。原因很实际：
- 如果拖到
connectedCallback再创建，元素首次插入 DOM 时会先以无 Shadow DOM 的状态渲染一次（可能闪一下），再补上 shadow 内容，破坏渲染一致性 -
constructor是唯一能确保 shadow root 在元素实例化时就存在的时机；此时this已存在，但还不能访问this.innerHTML或子节点（因为尚未解析） - 若需基于属性初始化 shadow 内容，可在
attributeChangedCallback中更新，但 root 本身得先建好
容易被忽略的样式隔离细节
Shadow DOM 确实隔离样式，但隔离方式比想象中更“松”：
- 外部 CSS 无法选中 shadow 内部元素（比如
my-button span对 shadow 里的<span></span>无效） - 但内部 CSS 可以用
:host选中宿主元素自身，用:host-context(...)响应外部环境（如主题类），还能用::slotted(*)捕获分发进来的节点样式 - 全局字体、颜色变量（
font-family,--theme-color）默认继承，除非显式重置；别以为“隔离=完全隔绝”
真正难的不是创建 shadow-root，而是判断什么时候不该用它：比如简单组件用普通 class + BEM 就够了，硬套 Shadow DOM 只会增加调试成本和 SSR 兼容麻烦。Chrome 和 Safari 支持很好，但旧版 Firefox 对 :host-context() 支持不全，上线前得查 caniuse 的具体条目，而不是只看“Shadow DOM v1”一行勾选。
