可以，iframe 能直接 append 到 shadowRoot，但会进入双重隔离；需先 append 再设 src 并监听 load 事件才能安全通信；::part() 无法修改其 UA 样式，须在 shadow 内用 CSS 硬写；跨域通信唯一可靠方式是 postMessage。
iframe 能不能直接 append 到 shadowRoot？
可以，iframe 是合法的 Shadow DOM 子节点，调用 shadowRoot.appendChild(iframe) 不会报错，也能正常加载。但挂载后立刻进入“双重隔离”：既受 iframe 自身浏览上下文隔离（跨域时 contentDocument 为 null），又受 Shadow DOM 的样式/CSSOM 封装限制（外部无法通过 ::part() 控制其 UA 样式）。
- 不要用
<template>+innerHTML注入含<iframe>的字符串再cloneNode(true)—— 这种方式 iframe 会加载，但跨域时contentDocument始终为null，且无法触发load事件监听 - 动态设置
src后立即读取iframe.contentDocument或调用contentWindow.postMessage()，大概率失败 —— 它还没完成导航，contentWindow可能尚未就绪 - 推荐写法：先创建
iframe元素，append到shadowRoot，再赋值src，并监听load事件后再操作
为什么 ::part(my-frame) 改不了 iframe 样式？
因为 iframe 是替换元素（replaced element），它的边框、光标、尺寸等由用户代理（UA）样式控制，不继承父级样式，也不响应 ::part() 伪元素规则 —— 即使你在 shadow 内给它加了 part="my-frame"，外部 CSS 也无法穿透生效。
- 想改 border、width、cursor 等，必须在 shadow 内部的
<style>里硬写，例如：iframe[part="my-frame"] { border: 2px solid #007bff; } -
exportparts对iframe无效 —— 它不支持被外部通过part选择器获取或操作内部 DOM，只适用于自定义元素内普通 HTML 元素 - 如果需要统一控制多个嵌入 iframe 的外观，建议封装成自定义元素，在 shadow 内统一管理样式和属性映射
父页怎么和 Shadow DOM 里的跨域 iframe 通信？
唯一可靠路径是 postMessage，Shadow DOM 不影响该机制，但它不改变同源策略 —— 跨域时 contentDocument 和 contentWindow 依然被浏览器置为 null，任何直接访问都会抛 SecurityError。
- 发送前必须确保 iframe 已挂载、
src已设、且已触发load事件，否则iframe.contentWindow可能为null -
postMessage的targetOrigin参数不能写"*"，必须明确指定子页面域名，如'<a href="https://www.php.cn/link/abe147752c8bdfa42ffb9a4aef3df1af">https://www.php.cn/link/abe147752c8bdfa42ffb9a4aef3df1af</a>' - 子页面必须在自身全局作用域中提前注册
window.addEventListener('message', ...)，并在 handler 中严格校验event.origin - 别试图在父页的 shadow 内注入
<script>去执行子页面逻辑 —— 那段脚本运行在父页上下文，window指向错误，postMessage也发不到 iframe 内部
常见翻车点：你以为能绕过，其实不能
-
document.domain：现代跨域场景下完全失效，且需父子双方配合设置，目前已基本弃用
- 直接读取
iframe.contentDocument.body：跨域时必然抛 SecurityError: Blocked a frame with origin ...，这不是时机问题，是浏览器强制拦截
- 用 Playwright 或 Puppeteer 的
contentFrame() API 在 Shadow DOM 内取 iframe：工具层可绕过，但真实浏览器环境仍受限制，测试通过 ≠ 生产可用
- 把子页面 JS 用
shadowRoot.innerHTML += '<script>...</script>' 注入：脚本执行在父页全局作用域，不是 iframe 内部上下文，所有 DOM 操作都错位
document.domain：现代跨域场景下完全失效，且需父子双方配合设置，目前已基本弃用iframe.contentDocument.body：跨域时必然抛 SecurityError: Blocked a frame with origin ...，这不是时机问题，是浏览器强制拦截contentFrame() API 在 Shadow DOM 内取 iframe：工具层可绕过，但真实浏览器环境仍受限制，测试通过 ≠ 生产可用shadowRoot.innerHTML += '<script>...</script>' 注入：脚本执行在父页全局作用域，不是 iframe 内部上下文，所有 DOM 操作都错位Shadow DOM 内的 iframe 不是“更安全的 iframe”，而是“更难调试的 iframe”——隔离叠加让时序、样式、通信三重问题同时出现，最容易被忽略的是：你得在子页面里主动监听 message，而不是指望父页单方面驱动。
立即学习“前端免费学习笔记（深入）”；
