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.