可以，但必须用 appendChild() 或 append() 直接插入 iframe 元素；若通过 template + innerHTML clone，则跨域时 contentDocument 始终为 null。
iframe 能不能直接 append 到 shadowRoot 里
可以挂，但必须用 DOM 方法直接插入，不能靠 innerHTML 或 template 注入。浏览器允许 <iframe> 作为合法子节点被 appendChild() 或 append() 进 shadowRoot，不会报错；但若用 <template> + innerHTML 写死含 <iframe> 的字符串再 cloneNode(true)，iframe 会加载，contentDocument 在跨域时始终为 null —— 因为 clone 过程不触发 iframe 的完整初始化流程。
- 推荐写法：
const iframe = document.createElement('iframe'); iframe.src = '/widget.html'; shadowRoot.append(iframe); - 禁止写法：
template.innerHTML = '<iframe src="/widget.html"></iframe>'; shadowRoot.append(template.content.cloneNode(true)); - 动态设置
src后立即读iframe.contentDocument？大概率是null，得监听iframe.onload或轮询iframe.contentDocument?.readyState
为什么 ::part(my-frame) 改不了 iframe 的 border 和 cursor
因为 <iframe> 是替换元素（replaced element），它的 UA 样式（如 border、cursor、appearance）不响应 inherit，也不受外部 ::part() 影响。即使你在 shadow host 上写了 part="my-frame"，外部 CSS 里的 host::part(my-frame) { border: 2px solid red; } 也不会生效。
- 正确做法：在 shadowRoot 内部的
<style>中硬写，例如：iframe { border: 2px solid red; cursor: pointer; } - 别指望
host { font-family: inherit; }能让 iframe 里的文本继承父页字体——它只影响 shadow 内部元素，不影响 iframe 自身的渲染框样式 - Safari 对 iframe 的 UA 样式重置更严格，某些
box-sizing或vertical-align行为可能和 Chrome 不一致
同源下 contentDocument 可读，跨域就 SecurityError，那怎么通信
无论是否在 Shadow DOM 里，iframe 的 JS 通信机制完全不受影响：跨域时 contentDocument 和 contentWindow 被浏览器置为 null，任何读写都会抛 SecurityError；但 postMessage 依然可用，且不需要同源前提。
- 父页发消息前，必须确保 iframe 已挂载且
src已设置（哪怕设的是about:blank），否则iframe.contentWindow是null - 子页收消息必须绑定
window.addEventListener('message', handler)，并严格校验event.origin，不能只依赖sandbox="allow-same-origin" - Shadow DOM 不拦截、不修改、不增强
postMessage，它只管 DOM/CSS 封装层，JS 通信走的是浏览器级通道 - 别试
document.domain—— 现代浏览器已基本弃用，且需父子页双方配合，实际不可控
Playwright/Selenium 怎么定位 shadow 内的 iframe 并操作其内容
必须分两步穿透：先进 shadowRoot，再进 iframe 的 browsing context。一步到位的 locator（比如直接写 iframe >> text=Submit）会失败，因为自动化工具默认只在主文档上下文执行查询。
立即学习“前端免费学习笔记（深入）”；
- Playwright 示例：
await page.locator('wujie-app').shadowRoot().locator('iframe').contentFrame().locator('button[type="submit"]').click(); - Selenium（Python）示例：
shadow = driver.find_element(By.TAG_NAME, 'wujie-app').shadow_root; iframe = shadow.find_element(By.TAG_NAME, 'iframe'); frame_doc = driver.switch_to.frame(iframe); button = frame_doc.find_element(By.CSS_SELECTOR, 'button.submit'); - 切记：切换 iframe 上下文后，所有后续操作都在该 iframe 内进行；返回主文档需显式调用
switch_to.default_content()或switch_to.parent_frame() - 高并发场景下，避免硬等待 iframe 加载；改用显式等待
frameLocator().locator(...).waitFor()（Playwright）或WebDriverWait(driver, 5).until(EC.frame_to_be_available(...))（Selenium）
真正容易被忽略的点是：Shadow DOM 和 iframe 的双重隔离不是叠加效应，而是正交约束——DOM 结构隔离归 Shadow DOM 管，JS 执行环境隔离归 iframe 管，两者边界清晰但互不替代。想靠其中一个解决全部隔离问题，迟早踩坑。
