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 ca­ra­c­te­ri­zan por un entramado complejo de códigos HTML, CSS y Ja­va­S­cri­pt, sino que cada vez integran también más co­n­te­ni­dos (widgets, imágenes, vídeos, etc.) de otras fuentes como redes sociales, pla­ta­fo­r­mas de streaming o redes de di­s­tri­bu­ción de co­n­te­ni­dos. Si no deseas integrar los co­n­te­ni­dos con iFrame, Shadow DOM te aporta una al­te­r­na­ti­va de primer nivel para integrar este tipo de co­n­te­ni­dos de terceros.

A co­n­ti­nua­ción, te revelamos qué aporta este subnivel del Document Object Model (DOM), en qué otros es­ce­na­rios se puede emplear y cómo se puede integrar exac­ta­me­n­te en una página web propia.

¿Qué es Shadow DOM?

Shadow DOM es una su­b­va­rie­dad del Document Object Model (DOM) estándar y uno de los cuatro pilares fu­n­da­me­n­ta­les de los co­m­po­ne­n­tes web es­ta­n­da­ri­za­dos en el año 2012 por el consorcio W3C. Estas “sombras” de DOM las generan los na­ve­ga­do­res comunes igual que los DOM co­n­ve­n­cio­na­les de forma au­to­má­ti­ca a partir del código HTML, pero no se aplica a todo el proyecto web, sino solo al (los) co­m­po­ne­n­te(s) de proyecto que se expresa(n) en dicho código. Además, los Shadow DOM aíslan los elementos co­n­te­ni­dos de cualquier in­di­ca­ción de diseño o es­tru­c­tu­ra que se aplique a todo el proyecto, como de­te­r­mi­na­das in­s­tru­c­cio­nes CSS. Dicho de forma más general, los Shadow DOM son cápsulas in­de­pe­n­die­n­tes de códigos dentro de un DOM co­n­ve­n­cio­nal, pero con su propio rango de validez.

Nota

La de­no­mi­na­ción de “modelo” no es muy acertada ni para DOM ni para Shadow DOM ya que, en realidad, ambos son in­te­r­fa­ces para acceder a datos. El modelo de objeto su­b­ya­ce­n­te solo es de­te­r­mi­na­n­te para la validez de estas in­te­r­fa­ces.

¿Cómo se es­tru­c­tu­ran los Shadow DOM?

El uso de Shadow DOM implica que, al margen del árbol de documento general, que resume la es­tru­c­tu­ra DOM de todo el proyecto, existe un número in­de­fi­ni­do 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 de­te­r­mi­na­do 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 tra­n­si­ción entre DOM normal y DOM oculto se denomina Shadow Boundary (en español, “frontera de sombra”).

Imagen: Shadow DOM: representación gráfica
El contenido de un Shadow Tree no recibe in­flue­n­cias externas ni tampoco afecta a los co­n­te­ni­dos externos.

¿Cómo se usan o aplican exac­ta­me­n­te 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é­c­ni­ca­me­n­te 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 apli­ca­ción web. La re­n­de­ri­za­ció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 in­s­tru­c­cio­nes de estilo con un Ja­va­S­cri­pt sencillo, ilustra a la pe­r­fe­c­ción lo fácil que es integrar cápsulas DOM su­bo­r­di­na­das 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 co­m­po­ne­n­tes: primero se genera el su­b­do­cu­me­n­to oculto; en un segundo paso, se añade un elemento textual sencillo, y, fi­na­l­me­n­te, se altera el color de este texto mediante el tercer co­m­po­ne­n­te, en este caso, “red”, es decir, rojo).

Nota

Para activar un Shadow DOM de forma externa mediante Ja­va­S­cri­pt, el estado del método element.sha­do­w­Root 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é es­ce­na­rios podemos usar Shadow DOM?

Los Shadow DOM te ofrecen una opo­r­tu­ni­dad in­me­jo­ra­ble para tratar a algunos elementos de tu proyecto web de manera in­de­pe­n­die­n­te del resto, sin tener que echar mano de te­c­no­lo­gías es­pe­cia­les como iFrames. Además, hoy en día ya son co­m­pa­ti­bles con todos los na­ve­ga­do­res comunes y todas las técnicas de los co­m­po­ne­n­tes web modernos. Por lo tanto, si quieres crear un co­m­po­ne­n­te o área de­te­r­mi­na­do de tu página web de manera to­ta­l­me­n­te in­de­pe­n­die­n­te de las in­s­tru­c­cio­nes de estilo y es­tru­c­tu­ras que afectan a todo el documento, los DOM ocultos re­pre­se­n­tan una opción muy in­te­re­sa­n­te 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 co­rre­s­po­n­die­n­te mensaje de error. Los Shadow DOM están re­s­tri­n­gi­dos a los si­guie­n­tes co­m­po­ne­n­tes HTML:

  • article
  • aside
  • blo­c­k­quo­te
  • body
  • div
  • footer
  • h1, h2, h3, h4, h5, h6
  • header
  • main
  • nav
  • p
  • section
  • span
7wSOoG_REKc.jpg Para mostrar este video, se requieren cookies de terceros. Puede acceder y cambiar sus ajustes de cookies aquí.
Ir al menú principal