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:


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 on January 13, 2019.

Top comments (5)

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.


robdodson profile image
Rob Dodson

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

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

lalitkushwah profile image

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

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.