Which elements support shadow DOM?
— 1 minute read
It looks like you've found one of my older posts 😅 It's possible that some of the information may be out of date (or just plain wrong!) If you've still found the post helpful, but feel like it could use some improvement, let me know on Twitter.
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.