En el mundo actual lleno de arquitectura basada en componentes, todavía se da el caso de que CSS aplicado globalmente podría crear problemas en el resto de nuestro código. Esto se debe a la forma y cómo se creó CSS. No es necesariamente malo, pero es bueno tener en cuenta que podríamos usar el estilo de manera más efectiva a través de la idea de encapsulación en el mundo de la arquitectura de componentes. Esto nos ayuda a evitar efectos secundarios no deseados mientras mantenemos el código de nuestro componente limpio, mínimo, fácil de ampliar y reconstruir.
Una característica importante de los componentes web es la encapsulación: la capacidad de ocultar y diferenciar el comportamiento, el estilo y la estructura de marcado del otro código en la página, de modo que las diversas partes no se superpongan y mantengan el código agradable y limpio. El componente central de esto es la API Shadow DOM, que ofrece una forma de agregar un DOM oculto separado a un elemento. Este artículo aborda los conceptos básicos del uso de Shadow DOM y Shadow root.
Antes de la introducción de Shadow DOM, comprendamos algunos conceptos:
¿Qué es DOM?
La base de la página web es HTML, un lenguaje de marcado para que la gente lo escriba y lo entienda. HTML nos brinda una forma de agregar contenido y estructura, pero las máquinas necesitan un poco más que esto. Por esta razón, se está creando el Modelo de objetos de documento (también conocido como DOM). Luego, el DOM tiene una API que nuestras aplicaciones pueden usar para manipular la estructura, el contenido y el estilo de un documento.
¿Qué es el árbol DOM?
Cuando un navegador carga una página web, el código HTML se convierte en un modelo de datos que consta de «Objetos» y «Nodes». Además, se genera un “Árbol DOM” en el que se almacena la estructura de la página web.
Un árbol DOM se ve así:
Árbol DOM
Los componentes web son un conjunto de diversas tecnologías que le permiten crear elementos personalizados reutilizables. Su funcionalidad está encapsulada lejos del resto del programa y se puede incluir con las aplicaciones web.
Hay 4 estándares de componentes web, nos centraremos en Shadow DOM:
- Sombra DOM
- Plantillas HTML
- Elementos personalizados
- Importaciones HTML
Shadow DOM elimina la fragilidad de crear aplicaciones web. La fragilidad proviene de la naturaleza global de HTML, CSS y JavaScript. A lo largo de los años, hemos inventado una cantidad exorbitante de herramientas para resolver los problemas. Por ejemplo, cuando agrega una nueva identificación / clase de HTML, no dice si choca con el nombre actual utilizado en el sitio web. Se están produciendo sutiles fallos, ¡la especificidad de CSS se está convirtiendo en un gran problema! (¡importante todo!), los selectores de estilo se están desequilibrando y la producción puede verse afectada. Shadow DOM corrige tanto el HTML como el DOM. Esto agrega estilos de alcance a las aplicaciones web.
Nota: Tenga siempre en cuenta que este concepto no se aplica en todos los navegadores.
Shadow DOM se utiliza para la encapsulación. Shadow DOM permite al autor de un componente crear su propio DOM, que es independiente de un DOM normal. Esto garantiza que todo JavaScript y CSS escrito en este nuevo DOM se pueda encapsular por completo, y sus resultados están protegidos contra CSS declarado en un campo global, a menos que el componente lo permita.
Compiló el Shadow DOM: la estructura del DOM normalmente está oculta para nosotros, pero podemos verla en las herramientas de desarrollo. En Chrome, por ejemplo, debemos habilitar la opción «Mostrar agente de usuario shadow DOM» en las herramientas de desarrollo.
What you can see below #shadow-root is called “shadow DOM”.
No podemos obtener elementos DOM ocultos integrados con llamadas o selectores de JavaScript regulares. Estos no son niños normales sino una técnica sólida para la encapsulación.
Raíz de sombra: Un árbol de sombra es un árbol de Nodes cuya raíz se llama raíz de sombra . Una raíz oculta siempre se adjunta a través de su host a otro árbol de Nodes. Por lo tanto, el árbol de la sombra nunca está solo. El árbol de Nodes del host de la raíz de sombra a veces se denomina árbol de luz.
Shadow DOM permite que los árboles DOM ocultos se adjunten a los elementos de un árbol DOM normal.
Aquí, este árbol DOM de sombra comienza con una raíz de sombra debajo que se puede adjuntar a cualquier elemento que seleccione, de la misma manera que el DOM normal.
<my-header>
#shadow-root
<header>
<h1>
<button>
La parte superior del árbol de la sombra es la raíz de la sombra. El elemento al que se adjunta el árbol (<my-header>) se denomina host de sombra y el host tiene una propiedad llamada shadowRoot que hace referencia a la raíz de sombra. La raíz oculta es un fragmento de documento que se adjunta al elemento de host y tiene una propiedad de host que identifica su elemento de host. El acto de adjuntar una raíz de sombra es cómo el elemento obtiene su DOM de sombra.
Hay algunos fragmentos de terminología DOM en la sombra que debe tener en cuenta:
- Shadow host: El elemento que eliges para iniciar un nuevo Shadow DOM.
- Árbol de sombra: El árbol de Nodes, es decir, el árbol DOM dentro del DOM de sombra.
- Límite de sombra: este es el lugar donde termina el DOM de sombra y comienza el DOM normal.
- Raíz de sombra: Es el Node raíz del árbol de sombra.
Creación de Shadow DOM: una vez que haya elegido el elemento que desea usar para alojar su Shadow DOM, debe adjuntarle el Shadow DOM. Por favor, vea el fragmento a continuación.
<p class="highlight">Welcome to GeeksForGeeks</p>
<div id="Firstcomponent"></div>
<script>
const shadowRootOne =
document.getElementById('Firstcomponent')
.attachShadow({mode: 'open'});
</script>
Entonces, en este script, tomamos un elemento div con un id Firstcomponent, y luego llamamos a un método especial en este elemento llamado addedShadow() donde este método pasa un objeto con un modo de propiedad.
Hay dos limitaciones:
- Solo se puede crear una raíz de sombra por elemento.
- El elemento debe ser un elemento personalizado o uno de los siguientes: «cita en bloque», «cuerpo», «div», «artículo», «aparte», «pie de página», «h1…h6», «encabezado», «principal» «nav», «p», «section» o «span» y otros elementos, como <img>, no pueden albergar el árbol de sombras.
La opción de modo se utiliza para establecer el nivel de encapsulación. Debe seguir cualquiera de dos valores:
- «abierto» : abierto significa que puede acceder al shadow DOM usando JavaScript.
For example using the Element.shadowRoot property: let myShadowDom = myCustomElem.shadowRoot;
- “cerrado” : myCustomElem.shadowRoot devuelve nulo.
No podrá acceder al DOM de la sombra desde el exterior, si adjunta una raíz de la sombra a un elemento personalizado con el modo: conjunto cerrado .
Solo podemos acceder al shadow DOM por la referencia devuelta por addedShadow y probablemente esté oculto dentro de una clase. Los árboles de sombra nativos del navegador están cerrados. No hay manera de acceder a ellos. La raíz oculta, devuelta por el método attachShadow(). Este objeto representa el Node raíz de su Shadow DOM recién creado y agregará sus otros elementos.
Veamos el ejemplo que se proporciona a continuación, que muestra la adición de un elemento de párrafo en la Raíz oculta alojada por el componente.
const paragraphElement = document.createElement('p');
paragraphElement.setAttribute('class', 'highlight');
paragraphElement.innerText =
'This is a Shadow DOM paragraph';
shadowRootOne.appendChild(paragraphElement);
El código anterior adjuntará un nuevo elemento de párrafo con la clase de resaltado a Shadow Root, que se convierte en parte del nuevo Shadow DOM. Este elemento de párrafo se encapsula por separado del DOM principal para que no se pueda identificar realizando tanto JavaScript como selecciones de CSS. Tampoco heredará ningún estilo de la página de autor de CSS, pero en esta etapa tendrá los estilos de navegador predeterminados, ya que aún no hemos especificado estilos para este Shadow DOM.
Adición de estilos al Shadow DOM: los estilos dentro del Shadow Tree están dentro del alcance del Shadow Tree y no afectan los elementos fuera del Shadow Tree. A menudo, los estilos fuera del árbol de sombras no coinciden con los selectores dentro del árbol de sombras.
Hay 2 formas de agregar estilo a un DOM de sombra. La primera forma de incluir los estilos en Shadow DOM es la misma que agregar cualquier otro elemento a Shadow DOM. Con una simple llamada appendChild en Shadow Root. El otro método es usar el elemento <template> para agregar estilos, pero esto es parte de otro tema, por lo que solo veremos uno en este artículo.
const styleElement = document.createElement('style');
styleElement.innerText = `
.highlight {
background: #FFA500;
font-size: 6rem;
} `;
shadowRootOne.appendChild(styleElement);
El párrafo está encapsulado dentro de un Shadow DOM separado, por lo tanto, si cambió el estilo global para tener una mayor especificidad, no cambia el estilo del nuevo componente.