直接 innerHTML 会污染全局样式，因第三方组件样式写入 document.styleSheets 无作用域隔离；应使用 attachShadow({ mode: 'closed' }) 创建影子根，通过 template 克隆并分类注入 style/script/link，且需设置 :host { all: initial; font-family: inherit; color: inherit; } 防继承泄漏，事件默认冒泡需显式设 composed: false。
为什么直接 innerHTML 会污染全局样式
第三方组件（比如 Quill、Foundation 或 CMS 导出的 HTML 区块）自带 * { margin: 0; padding: 0; }、.btn、body { font-family: sans-serif; } 这类规则，一旦用 element.innerHTML = htmlString 写入主文档，这些样式就进了 document.styleSheets，立刻影响全站布局和字体继承。这不是权重问题，是浏览器根本没做作用域隔离——!important 都压不住。
必须用 attachShadow({ mode: 'closed' }) 创建影子根
mode: 'open' 看似方便调试，但生产环境等于开门揖盗：外部脚本可直接通过 el.shadowRoot 修改内部样式表或 DOM 节点；mode: 'closed' 才真正切断访问路径，DevTools 里仍能查看 #shadow-root，但 JS 无法读取 shadowRoot 属性。
- 创建后立即注入资源，不要等
connectedCallback或事件触发后再操作 - 禁止对
shadowRoot.innerHTML直接赋值含<style></style>或<script></script>的字符串——它们会逃逸到全局 - 若需支持 Safari 10.1+ 和旧版 Chrome，避免依赖
adoptedStyleSheets（Safari 17.4+ 才稳定支持）
安全注入 HTML、CSS 和 JS 的三步法
不能靠拼字符串完事。正确路径是：<template> 定义结构 → cloneNode(true) 拷贝 → 分类处理节点：
- 遇到
<style>，调用shadowRoot.appendChild(style)—— 这样它只作用于影子树 - 遇到
<link rel="stylesheet">，同样appendChild到shadowRoot，绝不能让它进document.head - 遇到
<script>，新建document.createElement('script')，设置textContent或src，再appendChild到shadowRoot；初始化逻辑必须显式传入shadowRoot，例如new Quill(shadowRoot.querySelector('#editor'))
容易被忽略的继承泄漏点
Shadow DOM 不自动隔离 font-family、color、line-height 这些可继承属性。宿主页面设了 body { font-family: "PingFang SC"; }，影子里的 <p> 依然会继承它。
立即学习“前端免费学习笔记（深入）”；
- 在影子根最外层加
:host { all: initial; font-family: inherit; color: inherit; }——all: initial会清掉display，所以必须手动补上display: block或对应值 - 事件默认
composed: true，广告按钮点击仍会冒泡到主文档；如需阻断，用dispatchEvent(new Event('click', { composed: false })) - 第三方脚本若调用
document.querySelector('header')，它拿到的是主文档的header，这不是 Shadow DOM 的缺陷，而是你没约束其执行上下文
