直接 innerHTML 注入会失效，因浏览器不执行<script>、不解析<style>、<link>加载到全局，导致脚本不运行、样式丢失、CSP报错及第三方组件初始化失败。
为什么直接 innerHTML 注入第三方 HTML 会失效
直接对 shadowRoot.innerHTML 赋值看似省事，但实际会丢弃所有 <script>、<style> 和 <link rel="stylesheet"> —— 浏览器既不执行脚本，也不解析样式规则，<link> 甚至会加载到 document.head，彻底破坏隔离。结果就是 Foundation 的 .grid-x 不生效、Quill 编辑器找不到容器、内联样式全空白。
-
<style>必须显式调用shadowRoot.appendChild(style)才能进入 Shadow DOM 的 CSSOM -
<script>需新建节点并appendChild到shadowRoot，否则执行上下文仍在全局 - 禁止用
document.createElement('style').textContent = ...拼接——易漏转义，且无法复用原始 HTML 中的媒体查询或 @import
如何安全注入含框架依赖的 HTML 字符串
必须用 <template> + cloneNode(true) 拆解原始结构，再逐类处理资源。这是唯一能保留脚本执行、样式生效且不触发 CSP 的方式。
- 把完整 HTML（含
<div class="foundation-block">和内联<style>）写进<template id="tmpl-widget"> - 用
template.content.cloneNode(true)获取纯净节点树，避免污染原template - 遍历克隆后的节点：对每个
<style>直接shadowRoot.appendChild()；对每个<script>，创建新script元素，复制src或textContent后再appendChild -
<link rel="stylesheet">绝不能插入shadowRoot.innerHTML，应改用fetch加载 CSS 文本后动态创建<style>
第三方 JS 初始化总失败的根本原因
像 new Foundation() 或 Quill('#editor') 默认在 document 上查找元素，而 Shadow DOM 内的节点根本不在主文档中，结果是查不到容器、初始化静默失败。
- 优先改用支持容器参数的 API：
new Quill(shadowRoot.querySelector('.ql-editor')) - 若框架不支持，必须包装初始化逻辑，将
document替换为shadowRoot作为查找上下文 - 避免
$(document).ready()类钩子——它永远等不到 Shadow DOM 内容挂载完成 - 初始化时机要等
shadowRoot已挂载且 DOM 就绪，可用requestAnimationFrame或简单setTimeout(() => {}, 0)
容器元素和 Shadow Root mode 的关键细节
容器元素本身不应带任何样式，推荐设 style="display: contents;" 避免引入额外盒模型；mode: "open" 是生产环境唯一合理选择。
立即学习“前端免费学习笔记（深入）”；
- 重复调用
attachShadow()会抛出Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached错误，需先检查element.shadowRoot === null -
mode: "closed"会让element.shadowRoot返回null，自动化测试、CMS 预览插件、DevTools 检查全部失效 -
mode不影响样式隔离能力，真正防污染靠的是 Shadow DOM 机制本身，不是闭包模式 -
:host和::slotted是唯一可控的穿透入口，但需显式声明，不能依赖默认行为
:host 前缀、以及是否遗漏了动态生成的 DOM 节点——这些都不会报错，只会静默失效。 
