如何在Chrome DevTools中搜索shadow-root选择器？

Question

我在使用Chrome开发工具时，通过在元素标签页上的cmd+f搜索栏来验证CSS选择器是否有效并能够被找到，以便在使用Playwright（或Puppeteer）编写E2E测试时进行检查。但是如何找到shadow-root内部的选择器呢？请注意：这个选择器可以通过代码找到，我只是无法在DevTools中找到它。以下是示例图片： 和 。

- mthomas

---

开发者工具无法再做到这一点了。过去是可以的，但现在Chrome已经移除了穿透阴影伪类选择器。你可以建议他们尝试至少在用户界面中使搜索功能正常运作，也许他们会找到一种方法。 - wOxxOm

Answer 1

使用shadowRoot可以分为两个阶段来完成。

首先将具有影子DOM的元素分配给一个常量，然后使用querySelector来定位影子内部的元素。

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

- Lukas C

---

好的，至少我可以在控制台中检查选择器，但这不是我首选的方式，在开发工具的元素选项卡中更好。无论如何，谢谢。 - mthomas

我猜那个冒号应该是一个分号吧 ;) - undefined