shadow dom 内 未生效通常因插入时机错误、用 innerhtml 赋值被忽略，或未调用 appendchild 挂载；正确做法是创建 style 元素、设 textcontent、再 appendchild 到 shadowroot。
Shadow DOM里写<style></style>标签为什么没生效
因为 Shadow DOM 的样式作用域默认隔离，外部样式表和父级 <style></style> 无法穿透影响内部节点。但你在 Shadow Root 内部写的 <style></style> 是完全有效的——问题往往出在插入时机或方式上。
- Shadow Root 尚未 attach（比如用
attachShadow({mode: 'open'})后没立刻 appendChild）时就写入<style></style>，样式节点可能被丢弃 - 用
innerHTML = '...<style>...</style>...'赋值时，<style></style>标签会被浏览器忽略（HTML 解析器不执行内联 style 插入） - 动态创建
<style></style>元素后，必须显式调用shadowRoot.appendChild(styleEl)，不能只 new 出来就完事
正确注入内联样式的三步操作
最稳妥的方式是手动创建、填充、挂载 <style></style> 元素，适用于 Lit、Stencil、原生 Web Components 等所有场景。
- 先获取或创建 Shadow Root：
const shadow = this.attachShadow({mode: 'open'}) - 创建 style 元素：
const style = document.createElement('style') - 设置 CSS 文本（注意不要用
innerHTML）：style.textContent = 'button { color: red; }'，然后shadow.appendChild(style)
示例片段：
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const style = document.createElement('style');
style.textContent = `:host { display: block; }
button { background: #007bff; color: white; }`;
shadow.appendChild(style);
shadow.appendChild(document.createElement('button'));
}
:host 和 ::slotted 这两个伪类必须用对
它们是 Shadow DOM 样式穿透的关键，但容易误用：前者匹配自定义元素自身（即宿主），后者匹配传入的 slot 内容——不是子组件，而是被 <slot></slot> 投影出去的外部节点。
-
:host不支持嵌套选择器如:host div（除非加:host-context()或用:host > div） -
::slotted(*)只能设继承属性（color、font 等），不能设 display、margin 等布局属性（那些由外部容器控制） - 若想让外部传入的按钮响应 hover，得在
::slotted(button)里写color: blue;，但不能写background: yellow;（它仍受外部样式支配）
动态更新 Shadow DOM 内样式时别直接改 textContent
频繁修改 style.textContent 会触发重排重绘，且旧规则不会自动清除——尤其当多个组件共用同一份 style 元素引用时，容易样式污染。
- 每次更新前建议先清空：
style.textContent = ''，再写新内容 - 更推荐做法：创建新
<style></style>元素，shadow.replaceChild(newStyle, oldStyle) - 如果用 CSSOM（
style.sheet.cssRules），注意 Safari 对insertRule在 Shadow 中的支持较晚（iOS 16.4+ 才稳定）
样式注入看着简单，真正麻烦的是边界情况：attach 前写、跨浏览器兼容、动态更新时的残留规则、以及 ::slotted 的能力边界——这些地方一不留神，就变成“写了但没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
