shadow dom 是唯一能从渲染引擎层面阻断外部样式穿透的原生方案，通过 attachshadow({ mode: 'open' }) 创建独立作用域，须用 注入内容、动态添加 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>' —— 这会导致
- 把完整 HTML（含内联
- 用
template.content.cloneNode(true)拷贝节点树 - 遍历克隆结果：对每个
第三方组件初始化必须限定在 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
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
