shadowroot.innerhtml会污染全局样式，因其将当作普通html解析而不进cssom，导致样式直接插入document.head全局生效；正确做法是用createelement('style')并appendchild到shadowroot。
为什么 shadowRoot.innerHTML = '' 会污染全局样式
因为 innerHTML 把 <style></style> 当作普通 HTML 解析，不进 CSSOM，浏览器直接将其插入 document.head —— 所有规则变成全局生效。这不是“穿透失败”，是根本没建立隔离边界。
- 常见现象：子组件的
normalize.css重置了主应用body字体大小 - 错误写法：
shadowRoot.innerHTML = '<style>button { color: red }</style> <button>OK</button>' - 正确路径：必须用
document.createElement('style')创建节点，再appendChild到shadowRoot - 若需动态注入第三方 CSS（如 Ant Design），必须提取内容、转为
CSSStyleSheet实例，再赋值给shadowRoot.adoptedStyleSheets
如何让 CSS 变量从宿主透入 shadow 内部
var(--x) 能生效不是靠“穿透”，而是继承链天然跨 boundary 向上查 —— 但变量必须挂在宿主元素自身或其直系祖先上，中间容器无效。
- ✅ 有效：
<my-button style="--primary: #3b82f6;"></my-button>或<my-button class="dark"></my-button>+.dark { --primary: #1e1e1e; } - ❌ 无效：
<div class="theme-dark"><my-button></my-button></div>+.theme-dark { --primary: red; }（变量没挂到 host，继承链中断） - JS 动态设置也一样：
element.style.setProperty('--bg', '#2d2d2d')才管用，document.body.style.setProperty没用 - 所有
var()必须带 fallback：color: var(--text-color, #333);，否则未定义时回退到 UA 默认值，可能崩样式
::slotted() 的能力边界和典型误用
::slotted() 是唯一能影响 slot 分发内容的伪类，但它只允许设可继承属性（color、font、line-height、background-color），对布局类属性完全无效。
- ❌
::slotted(*) { margin: 16px; }——margin不可继承，浏览器直接忽略 - ✅
::slotted(p) { color: var(--text-color); }—— 仅作用于传入<slot></slot>的顶层<p></p>元素 - slot 分发的是 light DOM 节点的引用，不是副本；强行干预布局等于打破封装边界，浏览器明确禁止
- 别依赖
::slotted(*)统一控制文字颜色 —— 它不递归，嵌套结构需显式声明，比如::slotted(.header)
:host 伪类响应外部状态的写法陷阱
:host 只匹配宿主元素自身（即 <my-button></my-button> 这个标签），它不自动影响子节点；子节点要响应主题，必须显式写 inherit 或用变量。
- ❌ 只写
:host(.dark) { color: white; }→ 宿主文本变白，内部<p></p>仍是 UA 默认黑色 - ✅ 补一句：
p { color: inherit; }或:host(.dark) > p { color: var(--text-color); } -
:host-context(.dark)已被 Chrome/Firefox 标记为 deprecated，应改用:host(.dark)配合外部 class 控制 - 想让圆角/边框响应主题？直接在
:host里用变量：:host { border-radius: var(--radius, 4px); }
attachShadow() 创建的是新 CSSOM，不是过滤器。容易被忽略的是——所有变量、inherit、:host、::slotted() 都必须配合使用，单点生效 ≠ 整体可控。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
