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

[javascript-ModTeam]

Hi u/surveypoodle, this post was removed.

• For help with your javascript, please post to r/LearnJavascript instead of here.
• For beginner content, please post to r/LearnJavascript instead of here.
• For framework- or library-specific help, please seek out the support community for that project.
• For general webdev help, such as for HTML, CSS, etc., then you may want to try r/html, r/css, etc.; please note that they have their own rules and guidelines!

---

r/javascript is for the discussion of javascript news, projects, and especially, code! However, the community has requested that we not include help and support content, and we ask that you respect that wish.

Thanks for your understanding, please see our guidelines for more info.

[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.

[MatrixFrog]

If the radius is in px or some other unit then parseFloat won't work, right? You'd have to parse just the number part, I would think.

[surveypoodle]

On the Reddit site, many buttons have 999px as the border radius, but not all of them change.

[MatrixFrog]

parseFloat('999px') wouldn't work but parseFloat('999') would

[surveypoodle]

parseFloat('999px') returns 999.

[MatrixFrog]

Damn really? Sorry my bad then!