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.
Top comments (5)
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
scopedproperty the style and the nodes of the rest of the tree are protected.Yep I think it's great when components use shadow dom to encapsulate their styles!
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 github.com/open-wc/open-wc/issues/...
shadowRoot.activeElement doesn't work in safari. Have you faced this issue?
Hm you may need to use document.activeElement. that will always point at the shadow host. That is by design to preserve encapsulation.