Shadow DOM: subunidad DOM para bloques de códigos encapsulados
En los últimos años, los proyectos web se han vuelto cada vez más complejos. En este contexto, las páginas recientes no solo se caracterizan por un entramado complejo de códigos HTML, CSS y JavaScript, sino que cada vez integran también más contenidos (widgets, imágenes, vídeos, etc.) de otras fuentes como redes sociales, plataformas de streaming o redes de distribución de contenidos. Si no deseas integrar los contenidos con iFrame, Shadow DOM te aporta una alternativa de primer nivel para integrar este tipo de contenidos de terceros.
A continuación, te revelamos qué aporta este subnivel del Document Object Model (DOM), en qué otros escenarios se puede emplear y cómo se puede integrar exactamente en una página web propia.
¿Qué es Shadow DOM?
Shadow DOM es una subvariedad del Document Object Model (DOM) estándar y uno de los cuatro pilares fundamentales de los componentes web estandarizados en el año 2012 por el consorcio W3C. Estas “sombras” de DOM las generan los navegadores comunes igual que los DOM convencionales de forma automática a partir del código HTML, pero no se aplica a todo el proyecto web, sino solo al (los) componente(s) de proyecto que se expresa(n) en dicho código. Además, los Shadow DOM aíslan los elementos contenidos de cualquier indicación de diseño o estructura que se aplique a todo el proyecto, como determinadas instrucciones CSS. Dicho de forma más general, los Shadow DOM son cápsulas independientes de códigos dentro de un DOM convencional, pero con su propio rango de validez.
La denominación de “modelo” no es muy acertada ni para DOM ni para Shadow DOM ya que, en realidad, ambos son interfaces para acceder a datos. El modelo de objeto subyacente solo es determinante para la validez de estas interfaces.
¿Cómo se estructuran los Shadow DOM?
El uso de Shadow DOM implica que, al margen del árbol de documento general, que resume la estructura DOM de todo el proyecto, existe un número indefinido de Shadow Trees (en español, “árboles de sombra”). Cada uno de estos árboles, cuya raíz se denomina Shadow Root (en español “raíz de sombra”) cuenta son sus propios elementos y su propio estilo. En este contexto, los Trees siempre se asignan a un elemento determinado del árbol de documento de orden superior o a otro Shadow Tree. En ambos casos, el elemento al que están asignados se denomina Shadow Host (en español “host de sombra”). La transición entre DOM normal y DOM oculto se denomina Shadow Boundary (en español, “frontera de sombra”).
¿Cómo se usan o aplican exactamente los Shadow DOM?
Para poder usar la interfaz Shadow DOM en un proyecto web, no hace falta que instales o integres ningún software adicional. Como técnicamente solo se trata de la creación de un subárbol en el código fuente, puedes aplicar un nuevo Shadow DOM en cualquier momento mediante el documento HTML de tu aplicación web. La renderización posterior se realiza junto con el DOM completo de orden superior, por lo que tampoco requiere ninguna acción adicional.
El siguiente ejemplo, en el que se añade a un documento HTML un Shadow DOM con elemento <p> y algunas instrucciones de estilo con un JavaScript sencillo, ilustra a la perfección lo fácil que es integrar cápsulas DOM subordinadas ocultas:
<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
// Crear el Shadow DOM para el Shadow Host:
var shadow = document.querySelector('#hostElement').createShadowRoot();
// Crear un elemento HTML en el Shadow DOM:
shadow.innerHTML = '<p>Este texto está en el Shadow DOM.</p>';
// Definir el estilo del elemento HTML en el Shadow DOM:
shadow.innerHTML += '<style>p { color: red; }</style>';
</script>
</body>
</html>
Por lo tanto, el script para aplicar el Shadow DOM consta de tres componentes: primero se genera el subdocumento oculto; en un segundo paso, se añade un elemento textual sencillo, y, finalmente, se altera el color de este texto mediante el tercer componente, en este caso, “red”, es decir, rojo).
Para activar un Shadow DOM de forma externa mediante JavaScript, el estado del método element.shadowRoot debe estar ajustado a “open” (en español, abierto). Si en este punto se ha definido el estado “closed”, se deniega el acceso al DOM oculto.
¿En qué escenarios podemos usar Shadow DOM?
Los Shadow DOM te ofrecen una oportunidad inmejorable para tratar a algunos elementos de tu proyecto web de manera independiente del resto, sin tener que echar mano de tecnologías especiales como iFrames. Además, hoy en día ya son compatibles con todos los navegadores comunes y todas las técnicas de los componentes web modernos. Por lo tanto, si quieres crear un componente o área determinado de tu página web de manera totalmente independiente de las instrucciones de estilo y estructuras que afectan a todo el documento, los DOM ocultos representan una opción muy interesante y fácil de aplicar, sobre todo en proyectos complejos.
No obstante, no puedes usar cualquier elemento HTML como Shadow Host. Si, por ejemplo, intentas aplicar la técnica a un archivo de imagen, obtendrás un error y el correspondiente mensaje de error. Los Shadow DOM están restringidos a los siguientes componentes HTML:
- article
- aside
- blockquote
- body
- div
- footer
- h1, h2, h3, h4, h5, h6
- header
- main
- nav
- p
- section
- span
Artículos similares
Crear páginas web con un Mac: ¿cuál es el mejor software?
Son muchos los caminos que tienen como destino la propia página principal. Crear páginas web con ordenadores Mac es posible sin conocimientos especiales de HTML, JavaScrip, etc. Para ello solo es necesario contar con un editor web sencillo y con las ideas para desarrollarla. Para los proyectos más complejos existen soluciones de software profesionales de fácil manejo que, además, facilitan la…
Tutorial básico de HTML: crea tu propio proyecto web
En la época de los sistemas de gestión de contenidos y plantillas para el diseño web, aprender HTML parece hoy una tarea superflua e innecesaria, y en realidad es todo lo contrario. En cuanto se presentan problemas de funcionamiento en una página o esta requiere la inclusión de elementos dinámicos, se revelará la necesidad de contar con conocimientos en HTML. En este completo tutorial de HTML para…
¿Cuáles son las novedades que ofrece HTML 5.1?
Ha pasado mucho tiempo hasta que el anhelado HTML5 viera la luz en otoño de 2014 y ahora, con HTML 5.1, se ha puesto a disposición la primera actualización del estándar web. A este respecto se han dado numerosos cambios, entre los que destaca la adaptación sencilla al diseño web responsivo. Sin embargo, a estos se suman diversas novedades en HTML, como el hecho de que algunos elementos y atributos…
Polyfill: módulos de código para la web moderna
Los sitios web y las aplicaciones pasan por cambios constantes. Las nuevas características y funciones prometen a menudo mayor calidad, más seguridad o un mejor rendimiento del proyecto web, por lo que implementarlas es a menudo una mera formalidad. Sin embargo, muchos navegadores se quedan muy atrás en lo que respecta a la compatibilidad con las modernas tecnologías web, un problema que se puede…