Question: selector inside shadow
eridem opened this issue · comments
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!
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?
Hi @AUToelboell,
I was trying to create a filter on https://skatteverket.se when I found it.
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.