Shadow DOM es una de las partes del standard de WebComponents que define el W3C. ¿Qué es exactamente y para que sirve el Shadow DOM?. Para entenderlo vamos a ver un bloque de código aparentemente sencillo.
<html>
<head>
<style>
p{
color:blue ;
}
</style>
</head>
<body>
<p id="host" style="color:red">hola que tal</p>
<p >otro parrafo</p>
<input type="button" value="aceptar" id="boton"/>
</body>
</html>
El código contiene dos párrafos uno que incluye un estilo inline y el otro que no tiene ningún estilo. Ahora bien la hoja de estilo asigna el color “blue” con , por lo tanto ambos párrafos se mostrarán azules.
Esto que aparentemente parece razonable genera muchos problemas ya que no permite aislar unas partes del documento y tratarlas de forma aislada como si fueran componentes. El documento entero es afectado por el atributo .
Shadow DOM
La solución a este problema pasa por utilizar el Shadow DOM , que es un árbol DOM que se construye en paralelo al árbol original de una parte del documento.
El siguiente bloque de código JavaScript se encarga de generar una estructura ShadowDOM de tal forma que cuando se pulse el botón se genere una estructura Shadow que substituya la estructura original.
window.onload=function() {
var boton=document.getElementById("boton");
boton.>
Como se puede observar el nodo “#host” es seleccionado y se construye un párrafo a través de ShadowDOM para substituir al párrafo original. Este nuevo párrafo tendrá color amarillo.
Lo importante es darse cuenta que la nueva estructura DOM se encuentra aislada ya que no le afecta la etiqueta el atributo . Este es uno de los conceptos poco a poco serán siendo más habituales cuando los WebComponents nos lleguen ya que en estos el aislamiento en fundamental.
Otros artículos relacionados : HTML5 Template Element ,HTML5 Visibility API
