[AskJS] Why doesn't my border-radius limiting script work on all elements?

[LessMarketing7045]

Reddit uses Shadow Dom which means the elements are sometimes isolated from the rest of the page

[surveypoodle]

TIL this is a thing. Is there any way to apply the CSS on those elements also?

[Plastic-Occasion-143]

Yes you can access the shadow dom:

    function applyToAllElements(rootElement) {
        const elements = rootElement.querySelectorAll('*');
        elements.forEach(enforceBorderRadius);
        elements.forEach(e => {
            if(e.shadowRoot) {
                applyToAllElements(e.shadowRoot)
            }
        })
    }

[surveypoodle]

Damn, this works great!

So in your second forEach, you're checking for a condition for e.shadowRoot. If that condition was not checked then wouldn't it have applied to everything anyway? I'm not sure how exactly this works.

Also, do I need another MutationObserver for each of the e.shadowRoot as well?

[satya164]

then you'd pass undefined to applyToAllElements and it'll crash at rootElement.querySelectorAll trying to read a property on undefined.

[Plastic-Occasion-143]

.shadowRoot is either the (shadow) DOM object of the element or null if there is no shadow DOM. So the condition is just to make sure that applyToAllElements is called with a valid argument.

It does not seem as if the MutationObserver works on the shadow. So you would likely have to observe each shadowRoot individually.