直接 innerhtml 赋值不起作用，因 被当作文本解析，无法进入 cssom；必须分步创建 style 元素并 appendchild 到 shadowroot，或使用 adoptedstylesheets 注入 cssstylesheet 实例。
为什么直接 innerHTML = '' 不起作用
这是最常踩的坑：把 <style></style> 当作普通 HTML 字符串塞进 shadowRoot.innerHTML，浏览器会把它当文本节点或孤立标签解析，根本不会进入 CSSOM。结果就是样式不生效、sheet.cssRules 为空、动态修改 style.textContent 完全无响应。
- 必须分两步：先用
shadowRoot.appendChild(document.createElement('button'))插入结构，再单独创建style元素并appendChild到shadowRoot - 禁止在模板字符串里拼接
<style></style>，尤其含用户输入时极易触发 XSS - 若需复用公共重置样式（如
* { box-sizing: border-box }），建议提前创建CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets = [baseSheet]注入（注意 Safari 16.4+ 才稳定支持）
如何正确注入第三方按钮库（如 Ant Design 或 Bootstrap）的样式
把 <link rel="stylesheet"> 直接插入 shadowRoot.innerHTML，CSS 会加载到全局 ，立刻污染宿主页面——这正是你试图隔离的问题根源。
- 不能用
innerHTML拼接<link>或内联<style></style>；也不能把第三方 CSS 文件地址直接写进 shadow 内部 - 正确做法是提取第三方 CSS 文本（如从 CDN
fetch），用new CSSStyleSheet()创建实例，再赋给shadowRoot.adoptedStyleSheets - 若使用构建工具（如 Vite、Webpack），可将第三方样式作为字符串导入，避免运行时
fetch带来的 CSP 和跨域问题
:host 和 ::slotted 是唯一可控的样式穿透出口
外部 button { background: blue !important } 对 Shadow 内按钮完全无效——不是权重不够，是浏览器压根不把这条规则纳入该 shadow tree 的样式计算流程。
-
:host只匹配宿主元素自身（即<my-button></my-button>这个标签），可用于响应属性：:host([loading]) { opacity: 0.7; }；:host-context(.dark)才能响应祖先链上的class="theme-dark" -
::slotted(button)仅作用于传入<slot></slot>的顶层<button></button>节点，且只支持可继承属性（color、font-family、background-color） - 禁止写
::slotted(*)或:host ::slotted(*)——行为不可靠，且违背封装原则；按钮尺寸、边框、间距等布局责任应由使用者控制
为什么 attachShadow({ mode: 'closed' }) 必须在 constructor 中调用
延迟到 connectedCallback 或更晚，DOM 已渲染、CSS 已计算、样式已污染，再挂 shadowRoot 也救不回来。
-
constructor()是唯一能确保 Shadow DOM 在元素生命周期早期就位的时机；此时this.shadowRoot可安全创建，且不会被重复调用报错Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached - 若在
connectedCallback里调用，可能因多次连接/断开触发多次挂载，导致样式表重复注入、事件监听器堆积 -
mode: 'closed'下this.shadowRoot返回null，调试时看不到#shadow-root节点——生产环境需配合显式暴露钩子（如__debugShadow），否则排查无门
复杂点在于：样式隔离不是“加了 Shadow DOM 就自动生效”，而是必须避开所有绕过 CSSOM 的路径；容易被忽略的是，哪怕只漏掉一个 <link> 或一次 innerHTML 赋值，整个隔离边界就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
