7 replies

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

shadowRoot

shadowRoot

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

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"});

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

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

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"}

{mode: "closed"}

{mode: "closed"}

{mode: "closed"}? is

attatchShadow

attatchShadow

attatchShadow

attatchShadow an object or something?

use cases for a closed shadow dom

Similar Threads

Similar Threads

Similar Threads