Shadow DOM 样式隔离需通过 attachShadow({ mode: 'open' }) 显式创建真实边界，外部 CSS（含 !important）在解析阶段即被跳过；样式注入须用 appendChild 或 adoptedStyleSheets，:host 和 ::slotted() 是唯一合法跨边界伪类，继承需显式声明，第三方 CSS 需预处理后注入。
Shadow DOM 样式隔离不是“加个属性就行”，而是必须创建真实边界
外部 CSS（包括 !important）对 Shadow DOM 内部元素完全无效，这不是优先级问题，是浏览器在样式解析阶段就跳过跨 boundary 匹配——规则压根不进 shadowRoot 的 CSSOM。所谓“作用域限制”必须靠 attachShadow() 显式创建隔离子树，而非靠 scoped 属性或 BEM 命名模拟。
常见错误现象：
-
document.querySelector('.shadow-inner-btn')查不到影子树内节点（默认只查 light DOM） - 给
设了font-family: system-ui，但 shadow 内文字仍用 Times New Roman（未显式继承） - 写
shadowRoot.innerHTML = '<style>...</style>'，后续 JS 改style.textContent完全无效（<style></style>被当普通 HTML 解析，不进 CSSOM）
必须用 attachShadow({ mode: 'open' }) 创建可调试的 shadow root
别用 mode: 'closed'——它会让 element.shadowRoot 返回 null，调试时无法 inspect 或通过 DevTools 修改样式。生产环境若真需封闭，也应先用 'open' 开发验证逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终调用
element.attachShadow({ mode: 'open' })获取shadowRoot对象 - 样式注入必须走 DOM 方法：
shadowRoot.appendChild(styleEl)，或更现代的adoptedStyleSheets - 关键继承要显式声明：
:host { font-family: inherit; color: inherit; }，否则用户代理样式会覆盖 - 避免把结构和样式拼在同一个
innerHTML字符串里；先设结构，再 append style 节点
:host 和 ::slotted() 是唯一合法跨边界的出口
W3C 规范只保留这两个伪类作为“穿墙”通道，其余全是单向封闭。它们不是增强选择器，而是边界协议接口——用错等于放弃封装意义。
使用限制：
-
:host只匹配宿主元素自身（比如<my-card></my-card>这个标签），不能写:host div.title去选内部子元素 -
:host([disabled])有效，:host-context(.theme-dark)才能响应外部 -
::slotted(p)只作用于被<slot></slot>投影进来的 light DOM 节点，且仅支持可继承属性：color、font、line-height、background-color - 禁止设
display、margin、width等布局属性；别写::slotted(*)—— 不可靠，也违背 slot 设计本意
第三方 CSS（如 Bootstrap）必须预处理后注入，不能直接塞 <link>
把 <link rel="stylesheet"> 直接塞进 shadowRoot.innerHTML，样式会加载到全局作用域，彻底失去隔离意义。正确做法是提取 CSS 文本，转为 CSSStyleSheet 实例，再通过 adoptedStyleSheets 注入。
实操要点：
- 用
DOMParser解析 HTML 字符串，提取所有<style></style>和<link rel="stylesheet">内容 - 对
@import、相对路径（如url(./img.png)）、CSS 变量继承链断裂等问题，需提前做资源代理或内联替换 - Safari 16.4+ / Chrome 73+ 支持
adoptedStyleSheets；旧版本需 fallback 到document.createElement('style')+appendChild - 绝对不要用
innerHTML = '<style>...</style>'替换样式——旧<style></style>被销毁，CSSOM 规则丢失，可能引发 FOUC
真正麻烦的从来不是怎么写样式，而是怎么让样式“只生效一次、只影响该处、只随宿主变化而变化”。:host-context() 的嵌套层级、::slotted() 的继承粒度、adoptedStyleSheets 的兼容性兜底——这些细节不踩一遍坑，根本没法落地。
