必须在 constructor 中调用 attachshadow({ mode: 'closed' })，否则样式污染、脚本执行失败、第三方库初始化异常；注入含 script/style 的 html 需用 domparser 拆解，手动处理样式表与脚本上下文，并重写库的容器查找逻辑。
直接把含 <style></style> 或 <script></script> 的 HTML 字符串塞进 shadowRoot.innerHTML，等于主动放弃隔离——样式会漏到全局，脚本在 window 下执行，第三方库初始化失败是必然结果。
为什么 attachShadow({ mode: 'closed' }) 必须在 constructor 中调用
延迟到 connectedCallback 或更晚，DOM 已渲染、CSS 已计算、样式已污染，再挂 shadowRoot 也救不回来。
-
constructor()是唯一能确保 Shadow DOM 在元素生命周期早期就位的时机；此时this.shadowRoot可安全创建，且不会被重复调用报错Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached - 若在
connectedCallback里调用，可能因多次连接/断开触发多次挂载，导致样式表重复注入、事件监听器堆积 -
mode: 'closed'不影响样式隔离能力，但会让this.shadowRoot返回null，调试时看不到#shadow-root节点——生产环境需配合__debugShadow这类显式暴露钩子，否则排查无门
如何安全注入含第三方 JS 和内联 style 的 HTML 字符串
不能靠 innerHTML = htmlString 一步到位。浏览器对 shadowRoot 内的 <script></script> 和 <style></style> 不解析、不执行、不作用域绑定，必须拆解处理。
- 用
DOMParser解析原始字符串，得到纯净Document对象 - 遍历所有
<style></style>节点，提取textContent，创建CSSStyleSheet实例，再赋值给shadowRoot.adoptedStyleSheets = [sheet]（注意兼容性：Safari 15.4+ 仅部分支持） - 对每个
<script></script>，需新建document.createElement('script')，设置textContent或src，并手动重绑定this、window、document到当前 shadow 上下文，否则new Foundation()这类库查不到容器 -
<link rel="stylesheet">绝不能直接插入shadowRoot，它会加载到document.head，彻底逃逸隔离边界
第三方 UI 库（如 Ant Design）在 Shadow DOM 中初始化失败的根本原因
它们默认在 document 上查找节点，而 shadow 内部节点不在主文档树中，document.querySelector('.ant-modal') 永远返回 null。
- 优先使用支持传入容器参数的 API：例如
new Quill(shadowRoot.querySelector('.ql-editor'))，而非new Quill('#editor') - 若库不支持，必须包装初始化逻辑，将所有
document替换为shadowRoot，并确保DOMContentLoaded或setTimeout(() => {}, 0)等待 shadow 内 DOM 就绪 - 避免
$(document).ready()类钩子——它监听的是主文档，与 shadow 无关 - Ant Design Modal 默认挂载到
document.body，必须通过getContainer: () => shadowRoot强制限定挂载范围，否则其<style></style>标签脱离容器，卸载时无法回收
真正难的不是写对 attachShadow，而是让整个生态（第三方库、构建产物、动态插入逻辑）都适配 shadow 上下文——漏掉任何一个环节，比如忘了重写 getContainer 或没拦截 <link>，隔离就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
