Shadow DOM 是唯一能从渲染引擎层面阻断外部样式穿透的原生方案，通过 attachShadow({ mode: 'open' }) 创建独立作用域，须用 <template> 注入内容、动态添加 style/script 节点，并重置继承链以确保完全隔离。
Shadow DOM 是目前唯一能从浏览器渲染引擎层面真正阻断样式穿透的原生方案。它不靠权重压制、不靠选择器加前缀，而是直接让外部 CSS 规则压根不参与内部元素的样式计算——外部的 * { margin: 0 } 或 button { background: red !important } 对 shadow 内节点完全无效。
用 attachShadow 创建独立作用域
必须显式调用 element.attachShadow({ mode: 'open' }) 创建 shadow root。mode 设为 'open' 便于调试（'closed' 虽更严格但 DevTools 不显示结构，实际开发中极少使用）。容器元素本身不渲染内容，只作为 shadow 的挂载点，例如：
<div id="editor-container"></div>- 后续所有 HTML 和 CSS 都注入到它的 shadowRoot，而非 document 全局
把样式和脚本正确注入 shadow 内部
不能直接写 shadowRoot.innerHTML = '<style>...</style><div>...</div>' —— 这会导致 <style> 不生效、<script> 不执行，还可能触发 CSP 报错。正确做法是用 <template> 中转：
- 把完整 HTML（含内联 <style> 和 <script>）写进 <template> 标签
- 用
template.content.cloneNode(true)拷贝节点树 - 遍历克隆结果：对每个 <style>，调用
shadowRoot.appendChild(style)；对每个 <script>，新建 script 元素并 appendChild，确保执行环境在 shadow 内 - 绝对不要往 shadowRoot 里塞 <link rel="stylesheet"> —— 它会加载到全局，失去隔离意义
重置继承链，切断主文档影响
即使进了 shadow，某些属性（如 font-family、color、line-height）仍会从宿主 document 继承。解决方法是在 shadow 内注入重置样式：
立即学习“前端免费学习笔记（深入）”；
<style>*:not(style) { all: initial; }</style>-
all: initial将除direction和unicode-bidi外所有 CSS 属性设为规范初始值（比如字体回归浏览器默认） -
:not(style)是安全防护，避免 <style> 标签自身被重置
第三方组件初始化必须限定在 shadow 内
像 Quill、TinyMCE 这类编辑器默认查 document，如果挂载点不在 shadow 内就会失败或污染全局。必须传入 shadow 内的节点：
new Quill(shadowRoot.querySelector('.ql-editor'))-
tinymce.init({ target: shadowRoot.querySelector('.tinymce') })（需 TinyMCE 6.3+） - 若组件不支持容器参数，就得修改源码，把所有
document.querySelector替换为shadowRoot.querySelector
不复杂但容易忽略
