¿Qué elementos de HTML pueden tener Shadow DOM?

Cuando trabajamos con componentes web nativos y polymer, 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, ¿Que elementos de HTML NO pueden aceptar shadow DOM? Bueno, una primera manera de saberlo es utilizando la opción de las herramientas del desarrollador en 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.

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

Ahora podemos revisar sitios web que tengan elementos que soporten shadow DOM, algunos ejemplos son el input, select, audio, video, estos elementos ya contiene shadow DOM y son casos especiales a los que NO podremos adjuntar Shadow DOM. Te recomiendo que utilices el sitio web de w3schools el cual trae ejemplos de muchos elementos y puedes probar si algún elemento ya trae consigo shadow DOM, en la siguiente imagen mostramos el elemento input :

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' }).

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

Pero todo esto aunque sirve de aprendizaje y comprobación de lo que estamos hablando, 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 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.

DOM Living Standard — Last Updated 1 March 2019

Si el elemento no es un nombre de custom element valido (básicamente es aquel elemento que tiene un guion medio en su nombre) o no es alguno de las etiquetas mencionados arriba, entonces el elemento no soporta adjuntarle un shadow DOM. En este punto puedes utilizar el primer método solo como un “double check” de lo que nos indica la especificación.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.