Kevin Powell - Community•2w ago

use cases for a closed shadow dom

Hey, i was taking a look at the difference between a closed and open shadow dom and found that if it's closed you can't interact it with the shadowRoot method e.g.

const element = document.querySelector("...");
element.attatchShadow({mode: "closed"});

console.log(element.shadowRoot) //null when mode is closed

const element = document.querySelector("...");
element.attatchShadow({mode: "closed"});

console.log(element.shadowRoot) //null when mode is closed

meaning if you wanted to add elements or styles you'd have to save a reference to it e.g. const elementShadow = element.attatchShadow({mode: "closed"}); and style it via that. I don't understand any useful purposes for this, would anyone be able to give some insight? Thanks in advance. additional question- why are the curly brackets needed for {mode: "closed"}? is attatchShadow an object or something?

6 Replies

Choo♚𝕂𝕚𝕟𝕘•2w ago

This is not for regular usage. This is for developers of web components. The goal is to avoid contamination between the component and the rest of the document. It is possible to plan properly to avoid this if you are the sole user of your own component, but it's a problem if your custom web component is part of a library intended for others to use. You cannot know in advance all the class names and ids that every user of your component will ever use on their page.

snxxwyyOP•2w ago

yeah that i'm for sure aware of, but since it doesn't interact with the document despite the mode being open or closed, i don't see a use for it being closed since that seems to just make it harder for yourself

Choo♚𝕂𝕚𝕟𝕘•2w ago

The goal is to make it harder to interact directly. Components that use this approach accept attributes for setting the properties. For example, there might be a color attribute for setting the text color instead of relying on CSS. This does not make it difficult for the user. They just have to interact in a different way. This is similar to the approach of having private properties in a class definition in OOP. The user must use getters and setters instead of setting the values directly.

snxxwyyOP•2w ago

i see what you're saying but i'm still struggling to grasp it, sorry for example if i wanted to get the count of all paragraph tags in an elements shadow dom i'd do-

const element = document.querySelector("...");
element.attachShadow({mode: "open"});

console.log(element.shadowRoot.querySelectorAll("p").length);

const element = document.querySelector("...");
element.attachShadow({mode: "open"});

console.log(element.shadowRoot.querySelectorAll("p").length);

but if the mode is closed i'd have to do-

const element = document.querySelector("...");
const elementShadow = element.attachShadow({mode: "closed"});

console.log(elementShadow.querySelectorAll("p").length);

const element = document.querySelector("...");
const elementShadow = element.attachShadow({mode: "closed"});

console.log(elementShadow.querySelectorAll("p").length);

that seems like there's no added benefit to that. You say it makes it harder to interact directly but either way you're referencing the element object so it wouldn't interfere with any other js code and since it's a shadow dom it wouldn't interact with the main document anyway.

Choo♚𝕂𝕚𝕟𝕘•2w ago

If you want total freedom to do whatever you want, don't use shadow DOM at all. As I said earlier, it is not for ordinary usage. When someone develops a custom web component for public use, they make available a specific set of capabilities. If you want to do anything else beyond that, it won't be easy. It's the same with OOP programming. Some things are made private. If you want to access it directly in ways that the getters and setters weren't designed for, it won't be easy. It only seems like no added benefit because of your perspective of thinking about it.

snxxwyyOP•2w ago

ah yeah that makes sense. So summing up from what you say, it's another layer to make it harder to interact directly (outside of what shadow dom already does with that) within the js code since if it's coming from a library you wouldn't be able to change closed to open meaning you can't change things the creator doesn't want you to etc? okay cool, thank you for the help

Gaming

Programming

use cases for a closed shadow dom

Did you find this page helpful?