Which elements support shadow DOM?
— 1 minute read
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, orspan, then throw aNotSupportedError``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.