¿Qué elementos de HTML pueden tener Shadow DOM?

¿Qué elementos de HTML pueden tener Shadow DOM?

Cuando trabajamos con componentes web, normalmente usamos el shadow DOM en los custom elements que creamos debido a que es la manera en que podemos sacarle todo el potencial a este estándar. Pero seguro que más de una ocasión nos hemos preguntado, ¿Qué elementos de HTML NO pueden aceptar Shadow DOM? Bueno, existen dos formas de saberlo.

  • La especificación del DOM Standard
  • Herramientas de desarrollador de Google Chrome

La especificación del DOM Standard

La manera más eficiente de saber exactamente que elementos NO soportan shadow DOM es guiarnos por lo que dice la especificación.

https://dom.spec.whatwg.org/#dom-element-attachshadow

En el punto 2 dice:

If this’s local name is not one of the following:

  • 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 "NotSupportedErrorDOMException.

Lo anterior se traduce de la siguiente manera.

Si el nombre del elemento es:

  • Un nombre válido de custom element, que básicamente es un nombre con un guion medio.
  • "article", "aside", "blockquote", "body", "div", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "main", "nav", "p", "section", or "span"

Entonces si le puedes agregar Shadow DOM

Herramienta de desarrollo de Google Chrome

La otra opción es usar las herramientas del desarrollador de Google Chrome para ver el shadow DOM de los elementos en una aplicación.

Esta configuración se encuentra en los settings del panel de herramientas para el desarrollador, para ello, debemos dar clic en los tres puntitos verticales y después en settings o solamente presionar F1.

herramienta de desarrollo a
herramienta de desarrollo a

Luego en Preferences  -> Elements activamos el checkbox que dice Show user agent shadow DOM.

herramienta de desarrollo b
herramienta de desarrollo b

Ahora podemos revisar sitios web que tengan elementos que soporten shadow DOM, algunos ejemplos son el input, select, audio, video, estos elementos ya contienen shadow DOM y por lo tanto NO podemos adjuntarles uno. En la siguiente imagen se muestra el elemento input :

herramienta de desarrollo c
herramienta de desarrollo c

También existen otros elementos que NO soportan Shadow DOM, ejemplo,
img, a, button, br, b, etc.

Tanto los elementos que ya tiene Shadow DOM como los que no lo soportan provocaran el siguiente error al invocar sobre ellos el método attachShadow({ mode: 'open' }). Tal como dice la especificación

Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow

Consola de Google Chrome

NotSupportedError: Operation is not supported

Consola de Firefox

Object doesn't support property or method 'attachShadow'

Consola Microsoft Edge

Podría interesarte