DEV Community

Rob Dodson for Google Web Dev

Posted on • Originally published at Medium on

Which elements support shadow DOM?

A dark building with several windows

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 thanks to Anne van Kesteren for showing us the way).

If context object’s local name is not a valid custom element name, article, aside, blockquote, body, div, footer, h1, h2, h3, h4, h5, h6, header, main, nav, p, section, or span, then throw a NotSupportedError DOMException.

Here’s a quick example using div:

Exceptions

It’s worth calling out that button, input, select, img, and a are not on this list and will throw an error if you try to attach a shadow root to them. If you need to use them you'll probably need to look into either wrapping these elements or using a type extension.

Originally published at robdodson.me on January 13, 2019.

Discussion (5)

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 Author

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 Author

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