How to search for shadow-root selector in Chrome DevTools?

Question

I'm using Chrome dev tools to check my css selectors when writing E2E-Tests using Playwright (or Puppeteer).

To verify a selector is valid and can be found I use the cmd+f search-bar in Elements-Tab in DevTools like this:

But how can I find selectors inside shadow-root?

Just to make clear: This selector can be found via code. I just can't find it in the DevTools

user_301664 · Answer

This can be done in two stages using shadowRoot.

First assign element with shadow dom to a constant, then use querySelector to target element(s) inside shadow.

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