shadow dom 是唯一能真正隔离第三方 html 的方案，必须在自定义元素构造函数中调用 attachshadow({ mode: 'open' })，配合 template 克隆节点、手动注入 style/script，并传入 shadowroot 作为 js 初始化上下文。
直接往页面里塞第三方 HTML 片段，不是“样式乱了”这么简单——body { margin: 0 }会重置整站布局，.button会被覆盖，<script></script>自动执行，<style></style>漏进document.styleSheets。这不是权重或命名问题，是作用域根本没切开。
为什么 innerHTML + div 包裹完全无效
很多人用<div class="widget"><!-- 第三方HTML --></div>试图隔离，结果发现宿主页面的button { padding: 4px }照样穿透进来，第三方的ul { list-style: none }也污染全局。原因很直白：
- 外部 CSS 选择器（如
body、*、button）默认可穿透任意普通 DOM 容器 -
<style></style>标签插入后，规则直接进入document.styleSheets，浏览器不识别“这个 style 属于谁” - 第三方 JS 初始化时查
document.querySelector('.editor')，但元素其实在你那个 div 里，查不到就静默失败
attachShadow({ mode: 'open' }) 是唯一生效入口
必须在自定义元素构造函数里调用attachShadow，不能拖到connectedCallback或DOMContentLoaded之后——DOM 渲染和样式计算一旦开始，污染就不可逆。
- 容器元素（如
<div id="widget-root"></div>）本身应设style="display: contents;"，避免引入额外盒模型干扰 - 生产环境一律用
mode: "open"："closed"会让element.shadowRoot返回null，DevTools 看不见、测试脚本读不到、CMS 编辑器预览失效 - 重复调用
attachShadow()会抛出Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached，需先判空：if (!el.shadowRoot) el.attachShadow({ mode: 'open' })
不能用 shadowRoot.innerHTML = htmlString
这是最常踩的坑：把含<style></style>和<script></script>的 HTML 字符串直接赋给shadowRoot.innerHTML，结果样式不生效、脚本不执行、CSP 报错，还可能把<link rel="stylesheet">加载到全局。
- 正确做法是用
<template></template>包裹原始 HTML，再用template.content.cloneNode(true)提取纯净节点树 - 遍历克隆后的节点：
style元素逐个shadowRoot.appendChild(style)；script要新建节点并appendChild，否则执行上下文仍在window - 禁止动态拼接
document.createElement('style').textContent = ...——易漏转义，且无法处理@import或media等规则 - 第三方 JS 初始化（如
new Foundation()）必须传入shadowRoot为上下文：new Foundation(shadowRoot.querySelector('.grid-x'))，否则查不到目标节点
iframe 是备选，但条件硬、代价明
如果你的场景纯静态、无 DOM 通信、不需 SEO，<iframe></iframe>确实省心。但它有三个不可妥协的硬约束：
-
src必须指向独立 HTML 文件（不能是about:blank或空字符串），否则资源路径解析失败 -
sandbox属性必须显式声明，如sandbox="allow-scripts allow-popups"，且绝不能含allow-same-origin - 外层容器必须设固定宽高 +
overflow: hidden，否则第三方脚本可能通过document.body.style.height = '99999px'撑爆布局
Shadow DOM 的复杂点不在 API，而在初始化上下文——比如 Quill 默认查document，你得手动传shadowRoot.querySelector('.ql-editor')；这点一忽略，就会退回innerHTML方案，污染反而更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
