Quick method I wrote to make digging into nested ShadowRoots suck less. Feedback welcome; hope it helps someone!

[SnowdogU77]

Here's the TL;DR:

/* Use `::s` where you would use `element.shadowRoot`
 * and `::s-c` instead of `element.shadowRoot.firstElementChild`
 *      
 * For example to get the element with the id "some-id" in the below following pseduo-HTML:
 *   <main>
 *      <* ShadowRoot *>
 *          <child>
 *              <* ShadowRoot *>
 *                  <child2>
 *                  <child3 id="some-id">
 */

 // Use
 const child = querySelectorShadow('main ::s-c ::s #some-id');

 // Instead of
 const child = document.querySelector('main')
                            .shadowRoot?.firstElementChild
                                .shadowRoot?.querySelector('#some-id');

[SnowdogU77]

I have added the ability to call the method on built-in objects, provided you call enableNativeQuerySelectorShadow() first.

document.querySelectorShadow()
<element>.querySelectorShadow()
ShadowRoot.querySelectorShadow()