直接对shadowRoot赋值innerHTML会失效，因其不执行<script>、不解析<style>、<link>加载到全局，导致脚本不运行、样式丢失、CSP报错；正确做法是用<template>+cloneNode(true)拆解后逐类处理资源。
为什么直接 innerHTML 注入会失效
对 shadowRoot 直接赋值 innerHTML = htmlString 看似最简，但实际会丢弃其中的 <script>、<style> 和 <link>——浏览器不执行它们，CSP 还可能报错。更糟的是，含内联样式或依赖 JS 初始化的组件（如 Foundation 的 .grid-x）会渲染失败或样式空白。
- 所有
<style>必须显式调用shadowRoot.appendChild(style) -
<script>需新建节点并 append 到shadowRoot，否则作用域仍在全局 -
<link rel="stylesheet">绝不能插入shadowRoot.innerHTML，它会加载到 document.head，彻底失去隔离意义
如何安全注入含第三方框架的 HTML 字符串
必须用 <template> + cloneNode(true) 拆解原始结构，再逐类处理资源。这是唯一能保留脚本执行、样式生效且不触发 CSP 的方式。
- 把完整 HTML（含
<div class="foundation-block">和内联<style>）写进<template>标签 - 用
template.content.cloneNode(true)获取纯净节点树 - 遍历克隆后的节点：对每个
<style>调用shadowRoot.appendChild()；对每个<script>，创建新script元素并appendChild到shadowRoot - 禁止使用
document.createElement('style').textContent = ...动态拼接——易漏转义、难维护
第三方 JS 初始化为何总失败
像 new Foundation() 或 Quill('#editor') 默认在 document 上查找元素，而 shadow 内的节点根本不在主文档中，结果是查不到容器、初始化静默失败。
- 优先改用支持容器参数的 API：
new Quill(shadowRoot.querySelector('.ql-editor')) - 若框架不支持，必须包装初始化逻辑，将
document替换为shadowRoot作为查找上下文 - 避免
$(document).ready()类钩子——它永远等不到 shadow 内容挂载完成 - 初始化时机要等
shadowRoot已挂载且 DOM 就绪，可用shadowRoot.addEventListener('DOMContentLoaded', ...)或简单setTimeout(..., 0)
mode: "open" vs mode: "closed" 的真实影响
样式隔离能力与 mode 无关，但调试和维护成本差异巨大。生产环境一律选 "open"。
立即学习“前端免费学习笔记（深入）”；
-
mode: "closed"会让element.shadowRoot返回null，自动化测试、CMS 预览插件、DevTools 检查全部失效 -
mode: "open"不降低安全性，反而让:host和::slotted的穿透控制可验证、可调试 - 真正防污染靠的是 Shadow DOM 机制本身，不是闭包模式；所谓“封闭”只阻断 JS 访问，不增强 CSS 隔离
最容易被忽略的点：CSS 继承属性（font-family、color、line-height）默认仍会从宿主继承。若需彻底切断，得在 :host 上显式重置，但别用 all: initial——它会干掉 display 等必需属性，应手动设置关键继承值。
