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

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

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

? is

attatchShadow

attatchShadow

an object or something?

KP-C

Kevin Powell - Community•15mo ago•

7 replies

snxxwyy

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

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

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

? is

attatchShadow

attatchShadow

an object or something?

use cases for a closed shadow dom

Similar Threads

use cases for a closed shadow dom

Similar Threads

Similar Threads

Similar Threads