shadow dom 中外部选择器如 body 无法匹配，但 font-family 等可继承属性会从宿主向上继承；all: initial 可阻断继承，但需用于 :not(style)；注入 style/script 应用 template 克隆；第三方编辑器需传入 shadowroot 内节点；css 变量依赖继承链，须定义在宿主或其祖先上。
为什么 body 或 * { margin: 0 } 在 Shadow DOM 里失效又“部分生效”
失效是因为浏览器压根不把 body、h1 这类外部选择器纳入 Shadow 内部的样式匹配流程——它们既不是宿主元素，也不在当前 shadow tree 作用域内。但“部分生效”是指像 font-family、color 这类可继承属性，会从宿主元素（比如 <my-editor></my-editor>）向上继承到主文档的 body 值，再流进 Shadow 内部未显式声明的子元素。
真正的问题不在选择器匹配失败，而在继承链没被主动切断。例如宿主上没重置 font-family，Shadow 里的 <p></p> 就会继承全局 * { font-family: sans-serif }，导致字体意外统一。
- 不要指望
!important跨 boundary 生效——它只参与同一 CSSOM 的权重计算，而 Shadow DOM 是独立 CSSOM -
all: initial是目前唯一能彻底阻断继承的手段，但必须加在 Shadow Root 顶层，且排除<style></style>自身：用*:not(style) { all: initial; } - 若组件需保留某些继承（如响应主题色），就别用
all: initial，改用显式重置关键属性：:host { font-family: system-ui; color: #333; line-height: 1.5; }
如何安全注入 <style></style> 和 <script></script> 到 Shadow DOM
shadowRoot.innerHTML = htmlString 会丢掉所有 <style></style> 和 <script></script> 节点，因为它们被当作文本解析，不进入 CSSOM/JS 执行环境。更糟的是，内联脚本可能触发 CSP 报错。
- 正确做法是用
<template></template>作为载体：<template id="editor-template"><style>...</style> <div class="ql-editor"></div></template> - 克隆后遍历节点树：
const clone = template.content.cloneNode(true); Array.from(clone.childNodes).forEach(node => { if (node.tagName === 'STYLE') shadowRoot.appendChild(node); if (node.tagName === 'SCRIPT') { const script = document.createElement('script'); script.textContent = node.textContent; shadowRoot.appendChild(script); } }); - 绝对不要往
shadowRoot.innerHTML里塞<link rel="stylesheet">——它会加载到全局 document，完全失去隔离意义
第三方编辑器（如 Quill、TinyMCE）在 Shadow DOM 中初始化失败的原因与解法
默认初始化逻辑（如 new Quill('#editor')）会查 document，而目标节点实际在 Shadow 内部，结果静默失败或报 Cannot find element。
- 必须显式传入 Shadow 内节点：
new Quill(shadowRoot.querySelector('.ql-editor')) - TinyMCE 6.3+ 支持
target参数：tinymce.init({ target: shadowRoot.querySelector('.tinymce') }) - 若编辑器版本太老或不支持容器参数，就得 fork 源码，把所有
document.querySelector替换为shadowRoot.querySelector - 注意资源路径问题：图片
src、@import字体、fetch 请求的相对路径，都以 Shadow 容器为基准，不是主文档根路径
var(--x) 看似穿透，但变量挂错位置就完全无效
CSS 变量能“透入” Shadow DOM，靠的是继承查找机制天然跨 boundary，但它只沿 DOM 树向上找，且严格依赖变量定义位置。
- ✅ 有效：
<my-button style="--primary: #3b82f6;"></my-button>或<my-button class="theme-dark"></my-button>+.theme-dark { --primary: #1e1e1e; } - ❌ 无效：
<div class="wrapper"><my-button></my-button></div>+.wrapper { --primary: red; }—— 变量挂在中间容器，继承链在宿主处中断 - JS 动态设置也一样：
element.style.setProperty('--bg', '#2d2d2d')才管用，document.body.style.setProperty没用 - 所有
var()必须带 fallback：background-color: var(--primary, #007bff);，否则变量未定义时直接回退 UA 初始值，可能崩布局
最常被忽略的是资源路径和 JS 执行上下文迁移——图片 src 解析、fetch 的相对路径、@import 字体的 base URL，全部以 Shadow 容器为基准，不是主文档根路径。这点在开发自研富文本编辑器时尤其容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
