Which elements support shadow DOM?
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.
Originally published at robdodson.me on January 13, 2019.