直接 innerHTML 赋值到 shadowRoot 不行，因浏览器不执行其中的 <script>、不解析 <style>，<link> 会逃逸至 document.head 导致样式污染和 CSP 报错；必须用 appendChild 显式注入 style/script 或通过 <template> 拆解节点树。
直接 innerHTML 赋值到 shadowRoot 为什么不行
因为浏览器根本不会执行其中的 <script>，也不会解析 <style>，<link rel="stylesheet"> 更会逃逸到 document.head，导致样式污染、脚本静默失败、CSP 报错。这不是“没写对”，而是机制层面禁止。
- 所有
<style>必须用shadowRoot.appendChild(style)显式注入 -
<script>要新建节点（document.createElement('script')），再appendChild到shadowRoot，否则作用域仍在全局 - 绝不能把含
<script>或<link>的字符串直接塞进shadowRoot.innerHTML - 正确入口是
<template>：把完整 HTML 写进去，再用template.content.cloneNode(true)拆解节点树
广告 JS 初始化总失败的根本原因
像 Quill('#editor') 或 new Foundation() 这类框架默认查 document，而 shadow 内的节点不在主文档中——不是 API 不兼容，是你没传对上下文。
- 优先改用支持容器参数的调用方式：
new Quill(shadowRoot.querySelector('.ql-editor')) - 若框架不支持，必须手动替换查找起点：把所有
document.querySelector替换为shadowRoot.querySelector - 避免依赖
$(document).ready()，它永远等不到 shadow 内容挂载完成 - 初始化时机建议用
setTimeout(() => { /* init */ }, 0)，确保 DOM 已就绪
iframe 沙箱比 Shadow DOM 更省心，但有硬约束
如果你只要渲染静态广告、不需 DOM 通信、不要 SEO 索引，iframe 是更可靠的选择——前提是满足三个不可妥协的条件。
-
src必须指向独立 HTML 文件（不能是about:blank或空字符串） -
sandbox属性必须显式声明权限，例如sandbox="allow-scripts allow-popups"，且**绝不能含allow-same-origin** - 外层容器必须设固定宽高 +
overflow: hidden，否则广告脚本可能动态撑开布局 - 空
sandbox=""会导致 iframe 白屏，Network 显示net::ERR_BLOCKED_BY_RESPONSE，不是加载失败，是浏览器拒绝解析响应体
all: unset 是唯一能对抗劫持广告的 CSS 手段
提高选择器权重对运营商劫持、中间设备注入的广告完全无效——它们要么走 <iframe>，要么直接往 document.head 插 <style>，甚至写内联 style="z-index:9999"。
立即学习“前端免费学习笔记（深入）”；
- 给广告容器加唯一 ID：
<div id="injected-ad-8a2f"></div> - 所有样式强制以该 ID 为前缀：
#injected-ad-8a2f { all: unset; font-family: system-ui; } - 禁用继承干扰：
#injected-ad-8a2f * { all: unset; }（注意保留direction和unicode-bidi） - 避免用 class 前缀（如
.ad-btn），广告自带同名 class 会覆盖你
真正麻烦的不是怎么写隔离代码，而是广告内容结构不可控——一旦它依赖全局样式（比如 body { line-height: 1.5 }），all: unset 就得手动补全，这点很容易被忽略。
