attachshadow({ mode: 'open' }) 是唯一能从浏览器渲染引擎层面切断样式污染的方案，其他方式对第三方 html/css 完全无效；必须正确调用并配合 template 克隆、资源重定向等措施才能实现真正隔离。
attachShadow({ mode: 'open' }) 是唯一能从浏览器渲染引擎层面切断样式污染的方案，其他方式（BEM、CSS Modules、scoped、@scope）对第三方 HTML/CSS 完全无效。
为什么直接包裹 div 挡不住 Bootstrap 的 button { margin: 0; }
外部 button { margin: 0; } 仍会匹配 shadow 内的 <button></button>，这不是权重问题——而是你根本没启用 Shadow DOM。仅用普通 div 包裹，所有样式仍在同一 CSSOM 中计算，!important 照样生效。
真正起作用的是浏览器在解析阶段就裁剪样式作用域：外部 <style></style> 和 <link> 根本不进入 shadowRoot 的 CSSOM 构建流程。
- 检查是否真的调用了
element.attachShadow({ mode: 'open' })，重复调用会抛出Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached - 确认容器元素没带干扰样式，推荐设
style="display: contents;"避免额外盒模型影响布局 -
mode: 'closed'会让element.shadowRoot返回null，调试和自动化测试全部失效，生产环境别用
怎么安全注入含 <style></style> 和 <script></script> 的编辑器 HTML
shadowRoot.innerHTML = htmlString 是高危操作：内联 <style></style> 不进 CSSOM，<script></script> 不执行，<link rel="stylesheet"> 会加载到全局，彻底破坏隔离。
正确做法是用 <template></template> + cloneNode() 拆解处理：
- 把完整 HTML（含
<div class="ql-container"></div>和内联<style></style>）写进<template id="editor-template"></template> - 用
template.content.cloneNode(true)获取节点树 - 遍历克隆结果：
shadowRoot.appendChild(style)注入每个<style></style>；对每个<script></script>，新建document.createElement('script')并appendChild到shadowRoot - 绝对禁止把
<link rel="stylesheet">插入shadowRoot.innerHTML—— 它会跳过 shadow，直连 document.head
第三方编辑器（如 Quill、TinyMCE）初始化失败怎么办
报错 Cannot find element 或静默失败，是因为 new Quill('#editor') 默认查 document，而目标元素在 shadow 内。
必须把查找范围锁死在 shadow 内部：
- 改用支持容器参数的初始化方式：
new Quill(shadowRoot.querySelector('.ql-editor')) - TinyMCE 6.3+ 支持
target参数：tinymce.init({ target: shadowRoot.querySelector('.tinymce') }) - 若编辑器不支持，只能 fork 源码，把所有
document.querySelector替换为shadowRoot.querySelector - JS 初始化脚本必须通过 DOM 方法注入（不能拼字符串），且执行时
this和document应指向 shadow 内上下文
:host 和 ::slotted() 是唯一合法的“穿墙”通道
想让预览窗口响应宿主主题，或允许用户传入自定义内容，只能靠这两个 W3C 规范保留的伪类。其他写法（::ng-deep、/deep/、>>>）已在 Chrome 120+、Firefox 115+ 彻底移除。
-
:host只匹配宿主元素自身（即<my-editor></my-editor>这个标签），不能写:host div去选子元素 -
::slotted(p)仅作用于被<slot></slot>投影的顶层<p></p>，且只支持可继承属性（color、font-family、line-height），禁用margin、display、width - 需要继承宿主字体？得显式写
:host { font-family: inherit; color: inherit; }，否则用户代理样式（如<input>默认 color）会覆盖 - 想加载第三方 CSS（如 Font Awesome）？用
adoptedStyleSheets（Chrome 73+ / Safari 16.4+）或资源代理方式，别塞<link>
src、@import 字体）、fetch 请求的 base URL、以及 JS 里硬编码的 document 引用——这些都得按 shadow 容器重定向，否则照样泄漏。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
