Playwright无法直接用page.query_selector()访问Shadow DOM，因浏览器阻止跨Shadow boundary查询；需先定位宿主元素再通过shadow_root属性逐层访问，closed模式下须用evaluate()绕过。
Playwright里直接用page.query_selector()进不了Shadow DOM
Shadow DOM默认是封闭的（mode="closed"），Playwright的常规选择器（如css、text=）无法穿透——这不是你 selector 写得不对，而是浏览器本身阻止了跨 Shadow boundary 的查询。
必须显式“钻进去”：先定位到含 Shadow Root 的宿主元素，再调用它的 shadow_root 属性，才能继续查子元素。
常见错误现象：page.query_selector("my-custom-element div.content") 返回 None，即使 DOM 结构里确实存在；或者报错 TypeError: Cannot read property 'querySelector' of null，说明宿主没拿到或 shadow_root 是 None。
- 确认宿主元素已挂载且有
shadowRoot：用page.eval_on_selector()检查el.shadowRoot是否为非空对象 - 封闭 Shadow DOM（
mode="closed"）时，shadow_root属性返回None，Playwright 无权访问——此时只能换思路（见下一条） - 推荐用
page.wait_for_selector()等待宿主就绪，再取shadow_root，避免因渲染延迟导致shadow_root为None
用shadow_root链式查找深层元素（适用于open模式）
只要宿主元素的 Shadow DOM 是 open 模式（默认），就能通过 element.shadow_root 获取可操作的根节点，再在其上继续调用 query_selector() 或 query_selector_all()。
立即学习“Python免费学习笔记（深入）”；
注意：返回的是 ShadowRoot 对象，不是 ElementHandle，不能直接 .click()，得先选中内部元素。
安全 Python 代码沙箱：在隔离的沙箱中执行任意 Python 代码，预装 requests、NumPy、pandas 库。返回 stdout、stderr。
host = page.query_selector("my-tabs")
shadow = host.shadow_root # 必须先取出来
tab_button = shadow.query_selector("button[data-tab='profile']")
tab_button.click()- 每层
shadow_root只能访问直接子 Shadow Root；多层嵌套需逐级获取：host.shadow_root.query_selector("inner-comp").shadow_root.query_selector("deep-button") -
shadow_root不支持伪类（如:nth-child）和复杂组合器（如div > span），建议用简单css或data-属性定位 - 若宿主是动态生成的（如 Web Component 异步升级），需加
page.wait_for_function("() => document.querySelector('my-tabs').shadowRoot !== null")
遇到closed Shadow DOM怎么办？绕不开就用evaluate()
当宿主明确设为 mode="closed"（比如某些第三方组件库），Playwright 无法读取其 shadow_root，此时常规路径失效。唯一可行方案是借助 page.evaluate() 在页面上下文中执行原生 DOM 操作。
这不是“黑魔法”，而是浏览器允许的合法访问方式——脚本运行在页面内，自然能读 closed Shadow Root（只要没被进一步隔离）。
button = page.evaluate("""(selector) => {
const host = document.querySelector(selector);
if (!host || !host.shadowRoot) return null;
return host.shadowRoot.querySelector("button.save");
}""", "my-form")- 返回的是序列化后的值（如
{ "textContent": "Save" }），如需交互，得改用evaluate_handle()返回JSHandle，再转成ElementHandle -
evaluate_handle()示例：handle = page.evaluate_handle("(sel) => document.querySelector(sel).shadowRoot.querySelector('input')", "my-input")，之后可用page.click(handle) - 此方法绕过了 Playwright 的自动等待机制，务必手动确保宿主和 Shadow 内容已就绪，否则容易报
Cannot read property 'querySelector' of null
别忽略CSS作用域和样式隔离带来的定位干扰
Shadow DOM 的样式是局部的，但 Playwright 的选择器引擎不解析 CSS 作用域——它只管 DOM 结构。这意味着：你在全局写的 div.card 样式不会影响 Shadow 内部的 div.card，但 Playwright 仍能通过标签+属性精准匹配。
真正容易踩坑的是：开发者常在 Shadow 内复用 class 名（如 btn、hidden），而全局也存在同名 class，导致你误以为 selector 匹配到了 Shadow 内元素，其实选中的是外部占位符或服务端渲染残留节点。
- 优先用
data-属性（如data-test-id="submit-btn"）而非 class 定位，避免样式层干扰 - 用
page.locator()替代query_selector()更安全：它支持自动重试 + 可视性检查，例如locator = page.locator("my-dialog").locator("button[data-action='confirm']")会隐式等待 Shadow 内容就绪 - 调试时打开 DevTools → Elements 面板，右键宿主元素 → “Reveal in Shadow DOM”，确认真实结构层级，比纯猜 selector 可靠得多
Shadow DOM 的嵌套深度、mode 类型、宿主渲染时机，三者叠加后很容易让定位逻辑变得脆弱。最稳妥的做法不是写更长的 selector，而是分步断言：先等宿主，再等 shadow_root 可用，最后等目标元素可交互——少一步都可能在 CI 环境里静默失败。
