DEV Community

Which elements support shadow DOM?

Rob Dodson on January 13, 2019

Oliver on twitter asked: Is there a list somewhere of which HTML elements can and can’t have a shadow DOM? As it turns out, there is! (Big ...
Collapse
 
uppercod profile image
Matias Trujillo

Hi!, the shadow-dom is amazing, what do you think of implementing it directly in component libraries?... is what I did with orby, by using the scoped property the style and the nodes of the rest of the tree are protected.

scoped-tree

Collapse
 
robdodson profile image
Rob Dodson

Yep I think it's great when components use shadow dom to encapsulate their styles!

Collapse
 
dakmor profile image
Thomas Allmer

Hey, I think when promoting type extensions it would be nice to mention that this will "forever" require a "polyfill".

Customized Built-In Elements are part of the spec indeed but Webkit e.g. all Apple products will not implement it.

Therefore such elements will "never" run natively on Iphone, Mac or Safari.

Some more details github.com/open-wc/open-wc/issues/...

Collapse
 
lalitkushwah profile image
LalitKushwah

shadowRoot.activeElement doesn't work in safari. Have you faced this issue?

Collapse
 
robdodson profile image
Rob Dodson

Hm you may need to use document.activeElement. that will always point at the shadow host. That is by design to preserve encapsulation.