Question: selector inside shadow

[eridem]

Hi everyone! Fantastic work with this project! I love it!

I am trying to create new rule on a website but I got a bit stuck on specific situation.

Example

This website has a cookie element and, inside, it has shadow content.

<cookie-area>
  #shadow-root (open)
  <div>
    <button id="open-options">...<button>
  <div>
</cookie-area>

The issue

With the editor, I am able to detect the cookie-area. Once it is visible, I am unable to detect the #open-options due it is inside the shadow.

It happens as well if I do it from the console.

// This works
document
  .querySelector('cookie-area')

// This won't work
document
  .querySelector('#open-options')

Although, if I use .shadowRoot on code, I am able to fetch it:

document
  .querySelector('cookie-area')
  .shadowRoot  // <--- this is what is needed
  .querySelector('#open-options')
  .click()

Question

I am wondering if anyone could give me a tip about how we could do this with the editor.

Thanks a lot to everyone who is involved on this project!

[AUToelboell]

Currently Consent-O-Matic doesn't work on shadow content. But we are looking in to it. Which website did you encounter this shadow-root?

[eridem]

Hi @AUToelboell, I was trying to create a filter on https://skatteverket.se when I found it.

[svnhub]

This will be supported in the next release using the "parent" in CSSMatcher to select the element with the shadow DOM (cookie-area in your example) and "selector" as the selection inside the shadow DOM (#open-options in your example).

In other words: If a parent element has a shadow DOM the CSSMatcher now jumps into the shadow when selecting children.