如何在 Chrome DevTools 中搜索影子根选择器？

Question

在使用 Playwright（或 Puppeteer）编写 E2E 测试时，我使用 Chrome 开发工具来检查我的 css 选择器。

为了验证选择器是否有效并且可以找到，我在 DevTools 的 Elements-Tab 中使用 cmd+f 搜索栏，如下所示：

但是如何在 Shadow-root 中找到选择器呢？

只是为了明确：这个选择器可以通过代码找到。我只是在 DevTools 中找不到它

Answer 1

这可以使用 ShadowRoot 分两个阶段完成。

首先将具有shadow dom 的元素分配给常量，然后使用querySelector 来定位shadow 内的元素。

const element = document.querySelector('wc-article-editor'):
element.shadowRoot.querySelector('.myclass');