Uso de Shadow DOM para Encapsular Estilos en Componentes Web
Contenido del curso
Frank Casanova
Rony Porraz Vargas
Hector Antruejo
Jorge Luis Garnica Blanco
Pablo Nicolás Alonso
Daniel Flores
Andres Felipe Pinchao Ramirez
Jimmy Buriticá Londoño
Luis Alejandro Vera Hernandez
Brandon Argel Verdeja Domínguez
Carlos Eduardo Gomez García
Martin Mendez
Nazareno Aznar Altamiranda
Martin Mendez
Jimmy Buriticá Londoño
Andrés Esteban Rodríguez Jiménez
Marco Marin
N40 M10
Matias Ezequiel Rivero
N40 M10
Alex hernandez mitre
Miguel Angel Reyes Moreno
José Alberto Ramírez Quiroz
Kenneth Angulo L
Kenneth Angulo L
Antonio López García
Antonio López García
Jorge Méndez Ortega
Marco Alan García
Daniel Andres Rojas Paredes
Kevin Daniel Hincapie Lumbaque
Kevin Isaí Santiago López
una pregunta: no se ve penalizado el SEO cuando se usa shadowDOM? si bien el navegador puede saber cual es el contenido del elemento, lo sabe el indexador de google? sabe lo que es un h1 si está dentro de un shadowDOM?
Si bien al final el navegador te muestra todo lo que renderizo dándole ver código fuente de la pagina que es lo que va a ver el Bot de Google no se si al programarlo lea los propios componentes.
Uno de los bots de google analiza las webs despues de ejecutarse los javascripts, sino habría muchas páginas que no se indexarian correctamente (sobre todo las páginas web cargadas con ajax). Un saludo.
Si desean visualizar el código html que se encuentra en los archivos .JS instalen la extensión **es6-string-html ** para visual studio code y coloque el comentario antes de codear en etiquetas como muestro en la imagen a continuación: !Imagen https://i.imgur.com/wbL6voa.png
¿Esto es para que Visual studio Code entienda que es html y te ayude con el auto-complete? 🤔
Gracias por el aporte, ahora es menos tedioso jaja
Shadow DOM
Con esta implementación podremos solucionar los problemas con los estilos css que se rescriben por temas de especificidad.
Generando como un encapsulado, un dom independiente dentro de nuestro dom global, esto que quiere decir que todo lo que coexista en nuestro dom independiente no va existir dentro de nuestro dom global.
class myElement extends HTMLElement{ constructor(){ super(); //Venimos al constructor que es donde generamos la instancia de esta api //Agregamos shadow down (API) y lo ponemos en modo open this.attachShadow({mode:"open"}) } getTemplate(){ const template = document.createElement('template'); template.innerHTML = ` <section> <h3>Hola mundo!</h3> <div> <p> Soy text ejemplo<p> </div> </section> ${this.getStyles()} `; return template } getStyles(){ return` <style> h2{ color:red; } </style> ` } render(){ //Ahora poder renderizar nuestros templates tenemos que cambiar el contexto //Donde agregamos nuestro template ya que lo estabamos agregando al dom global //Ahora debemos agregarlo en nuestro shadow dom que es otro contexto diferene this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true)) } connectedCallback(){ this.render(); } } customElements.define('my-element', myElement);
Es importante activar el shadow dom para poderlo visualmente en nuestro inspector de elementos .
Gracias por explicar el código.
Gracias, tendré que repasar esta clase para asimilarlo
Shadow DOM
El API de DOM Shadow es un parte clave para esto, proporcionando una forma de enlazar un DOM oculto y separado a un elemento. Este artículo cubre los aspectos básicos para utilizar Shadow DOM. ㅤ El Shadow DOM permite adjuntar arboles DOM ocultos a elementos en el árbol DOM regular, este árbol Shadow DOM comienza con un elemento Shadow Root, debajo del cual se puede adjuntar cualquier elemento que desee, de la misma manera que el DOM normal. ㅤ Hay algunos conceptos de Shadow DOM que deben ser tomados en cuenta:
Puede adjuntar un shadow root a cualquier elemento utilizamos el método Element.attachShadow (). Éste toma como parámetro un objeto que contiene una propiedad mode con dos posibles valores: open o closed.
ㅤ
open: Significa que puede acceder al shadow DOM usando JavaScript en el contexto principal de la página. Por ejemplo, usando la propiedad
closed: Significa que no se puede acceder al shadow Dom desde afuera, como con la etiqueta video.
Ohhh vale, ya ví en donde se usa el template, ese template que está ahi en el HTML no sirve para nada, el que sí sirve es el que creamos con el createElement jaja.
.
Aun así me sigue causando conflicto que tenemos que usar innerHTML para poder meter el contenido del template xc
No hay problema porque el innerHtml no proviene de un input del usuario y en caso de que viniera de un usuario lo tendrías que limpiar en el backend hay varias funciones para php, JS o phython que sanitizan el código
Hay una forma distinta donde la etiqueta <template> se utiliza, solo que el profesor saltó a otro método y nos dejó así ¯_(ツ)_/¯ Te dejo unos enlaces al respecto
https://www.w3schools.com/tags/tag_template.asp https://developer.mozilla.org/es/docs/Web/HTML/Element/template
Se puede agregar css desde fuera del componente? Al shadow dom
Hay dos opciones para adicionar CSS desde afuera del componente, una es pasar algunas variables a través de la etiqueta en HTML, así como lo haces con cualquier etiqueta HTML. Obviamente esta opción es muy limitada. La otra opción es pasar CSS desde JavaScript.
Shadow DOM
Shadow DOM se puede entender como un DOM independiente de el Documento principal, ya que los estilos que escribamos acá no afectan los elementos externos del DOM principal. .
Esto nos ayuda a tener mejores prácticas con CSS ya que no tendremos un colapso de estilos y evitaremos usar cosas como el !important.
.
Veamos con nuestro ejemplo anterior como implementarlo:
class MyElement extends HTMLElement { constructor ( ) { super(); this.attachShadow({ /* Permite interactuar con el componente viendo lo que tenemos dentro del mismo en una #shadow-root */ mode: 'open' }) } ... }
Si vemos ahora nuestro navegador, no veremos el componente, esto debido a que ya esta creado este DOM paralelo, pero en la estructura de HTML en el inspector nos muestra que hay un Shadow root
Entonces ¿Como lo renderizamos? Sencillo, simplemente en el método render debemos cambiar la manera como lo renderizamos en HTML. Esto lo haremos con la propiedad shadowRoot.
class MyElement extends HTMLElement { constructor ( ) { ... }) } ... render() { /* Le decimos que acceda a la propiedad **shadowRoot** para que pueda renderizar el contenido del componente */ this.shadowRoot.append(this.getTemplate().content.cloneNode(true)); } ... }
Y si vemos ahora nuestro navegador, nuestro componente estará renderizado 😁.
En esta URL hay una muy buena explicación sobre el funcinamiento del Shadow DOM y sus opciones. https://www.todojs.com/shadow-dom-a-fondo/
Esto es una locura!!!!
Tremendo los webComponent, que tipo de usos se te ocurren en un proyecto? Saludos..
Los webComponents literalmente son como una caja de herramientas, la información es la materia prima y la comunicación el fin. El resto depende de nuestra experiencia e imaginación.
muy interesante la clase
Apuntes de esta clase:
Shadow DOM
Esto nos ayudará evitar problemas de estilos reescribiendose. Esto se logrará por el encapsulado.
Pensemos en ShadowDOM como un DOM independiente adentro del DOM global, es por esto que los estilos estilos serán independientes en cada uno.
this.attachShadow({mode: 'open'}); //*Casi siempre todos los componentes tiene que venir en modo abierto.
this.shadowRoot.append(this.getTemplate().content.cloneNode(true)); //* Aquí tenemos que especificar `shadowRoot` para que se agregue al DOM y se vea reflejado en el navegador
El tema de especifidad es un tema importante durante la declaracion de estilos y comprenderlo nos ayuda eliminarnos la pregunta de por que se rompio algo
https://platzi.com/clases/1665-preprocesadores/22294-selectores-de-css/ Esta clase me gusto y se aborda todo el tema de especifidad
¿Cuándo debo usar el Shadow Root?
Debes usar el Shadow Root en el momento exacto en que necesites renderizar HTML o aplicar CSS que deba ser completamente inmune al entorno exterior. Es el paso inmediatamente posterior a adjuntar el Shadow DOM con attachShadow.
Piensa en el Shadow Root como el lienzo en blanco que te entrega el navegador una vez que levantas los muros de tu componente. Si intentas usar el clásico this.appendChild() directamente sobre el componente, estarás inyectando elementos en el Light DOM (el DOM normal), dejándolos expuestos a los estilos globales. En cambio, al usar this.shadowRoot.appendChild(), te aseguras de que todo tu template, tus etiquetas y tus estilos se guarden de forma segura dentro de la bóveda encapsulada. Es tu herramienta principal de escritura y lectura exclusiva para el interior de ese componente web.
¿Es posible inspeccionar el Shadow DOM?
¡Sí, totalmente! Aunque el Shadow DOM crea una barrera lógica para el código, los navegadores modernos están diseñados para que los desarrolladores puedan auditar visualmente todo lo que ocurre bajo el capó.
Para verlo, solo necesitas abrir las DevTools de tu navegador (como Chrome o Edge). Si no ves una etiqueta especial llamada #shadow-root (open) dentro de tu componente, debes ir a la configuración (el ícono de engranaje) del panel de elementos. Allí, busca la sección de preferencias y activa la opción que dice Show user agent shadow DOM o similar. Una vez habilitado, podrás desplegar el árbol de tu componente y ver exactamente cómo se estructuran tus etiquetas internas y qué estilos encapsulados se están aplicando, tal como lo harías con cualquier etiqueta nativa compleja como <video> o <input>.
Quiero crear un componente con el tipico menu de hamburguesa. Creo dos div y una función para el evento onclick. Funciona sin problemas. Pero a la que quiero añadir el shadowDoom para no tener problemas con los stilos de css no funciona correctamente:
index:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test web components</title> </head> <body> <script defer type="module" src="./main.js"></script> <div-wc></div-wc> </body> </html>
main.js
import './classes/div-wc/div-wc.js'
div-wc.js //sin shadowDoom
class DivWC extends HTMLElement { constructor() { super() this.showHideDivs = true this.onclick = () => { this.clickDiv() } } getTemplate() { const template = document.createElement("template") template.innerHTML = /*html*/ ` <div id='div_01' class='div_01' ></div> <div id='div_02' class='div_02' ></div> ${this.getStyles()} ` return template } clickDiv() { if (this.showHideDivs) { console.log('Click this.showHideDivs=true') document.getElementById('div_01').style.display = 'none' document.getElementById('div_02').style.display = 'block' this.showHideDivs = false } else { console.log('Click this.showHideDivs=false') document.getElementById('div_01').style.display = 'block' document.getElementById('div_02').style.display = 'none' this.showHideDivs = true } } getStyles() { return /*css*/ ` <style> .div_01 { width: 30px; height: 30px; background-color: red; } .div_02 { width: 30px; height: 30px; background-color: green; display: none; } </style> ` } render() { this.appendChild(this.getTemplate().content.cloneNode(true)) } connectedCallback() { this.render() } } customElements.define('div-wc', DivWC)
//Con shadowDoom
class DivWC extends HTMLElement { constructor() { super() this.attachShadow({ mode: "open" }) this.showHideDivs = true this.onclick = () => { this.clickDiv() } } getTemplate() { const template = document.createElement("template") template.innerHTML = /*html*/ ` <div id='div_01' class='div_01' ></div> <div id='div_02' class='div_02' ></div> ${this.getStyles()} ` return template } clickDiv() { if (this.showHideDivs) { console.log('Click this.showHideDivs=true') document.getElementById('div_01').style.display = 'none' document.getElementById('div_02').style.display = 'block' this.showHideDivs = false } else { console.log('Click this.showHideDivs=false') document.getElementById('div_01').style.display = 'block' document.getElementById('div_02').style.display = 'none' this.showHideDivs = true } } getStyles() { return /*css*/ ` <style> .div_01 { width: 30px; height: 30px; background-color: red; } .div_02 { width: 30px; height: 30px; background-color: green; display: none; } </style> ` } render() { /* this.appendChild(this.getTemplate().content.cloneNode(true)) */ this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true)) } connectedCallback() { this.render() } } customElements.define('div-wc', DivWC)
Si tenéis alguna sugerencia de hacer un componente del típico menú de hamburguesa mejor que mi idea...será bienvenida. Un saludo a todos y gracias por vuestro tiempo y ayuda.
solucionado:
class DivWC extends HTMLElement { constructor() { super() this.attachShadow({ mode: "open" }) this.showHideDivs = true this.onclick = () => { this.clickDiv() } } getTemplate() { const template = document.createElement("template") template.innerHTML = /*html*/ ` <div id='div_01' class='div_01' ></div> <div id='div_02' class='div_02' ></div> <div id='div_03' class='div_03' ></div> ${this.getStyles()} ` return template } clickDiv() { if (this.showHideDivs) { console.log('Click this.showHideDivs=true') this.shadowRoot.getElementById('div_01').style.display = 'none' this.shadowRoot.getElementById('div_02').style.display = 'block' this.showHideDivs = false } else { console.log('Click this.showHideDivs=false') this.shadowRoot.getElementById('div_01').style.display = 'block' this.shadowRoot.getElementById('div_02').style.display = 'none' this.showHideDivs = true } } getStyles() { return /*css*/ ` <style> .div_01, .div_02 { position: absolute; top: 5px; left: 815px; width: 30px; height: 30px; background-color: red; } .div_02 { background-color: green; display: none; } </style> ` } render() { /* this.appendChild(this.getTemplate().content.cloneNode(true)) */ this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true)) } connectedCallback() { this.render() } } customElements.define('div-wc', DivWC)
En este caso no está penalizado el SEO ?, si se indexea correctamente?
Encontré esto ... si averiguas algo más específico... cuéntanos
miren que intente meter otro body dentro del componente para probar el aislamiento del que nos provee template.... i no funciono =( es decir, el codigo corre pero no hay 2 etiquetas body en el dom, realmente lo intente en mi codigo pero en el doom que muestra el inspector de elementos la que estaba dentro del component desaparecio =(
Personalmente no me gusta usar el innerHTML (al inicio me gustaba porque era mas facil), ahora prefiero usar las herramientas del DOM asi que usandolas el codigo quedaria algo asi:
class MyShadowElement extends HTMLElement { constructor(){ super(); const shadowRoot = this.attachShadow({mode: "open"}) } getTemplate() { let template = document.createElement('template'); let header = document.createElement('header'); let title = document.createElement('h1'); title.innerText = 'My web Component'; header.append(title); template.content.append(header); template.content.append(this.getStyles()); return template; } getStyles() { const style = document.createElement('style'); style.textContent = ` header { box-sizing: border-box; width: 100%; height: 5rem; display: grid; place-items: center; background-color: orange; border-radius: 3px; padding: 15px; } h1 { color: purple; font-family: monospace; margin: 0; } `; return style; } render() { let template = this.getTemplate().content.cloneNode(true); this.shadowRoot.appendChild(template); } connectedCallback(){ this.render(); } } customElements.define('my-shadow-element', MyShadowElement); ´´´
🧠 "Creado con la ayuda de una IA."
Creación del componente personalizado
Para crear un componente personalizado en JavaScript, primero debes definir una clase que extienda la clase HTMLElement. Esta clase representa el nuevo elemento HTML personalizado.
class MyElement extends HTMLElement { // ... }
Constructor
El constructor se llama cuando se crea una instancia del elemento personalizado. Puedes utilizarlo para realizar cualquier configuración necesaria, como adjuntar un shadow DOM.
constructor() { super(); // Llamada al constructor de la clase base this.attachShadow({ mode: "open" }); // Adjuntar shadow DOM }
Shadow DOM
El Shadow DOM es una característica de HTML que permite adjuntar un DOM separado y encapsulado a un elemento personalizado. Para crear un Shadow DOM, se utiliza el método attachShadow(), que permite encapsular la estructura del DOM y los estilos CSS, previniendo conflictos y manteniendo mayor claridad en el código.
this.attachShadow({ mode: "open" });
Generación de contenido
Para generar el contenido de un elemento personalizado, puedes crear una plantilla de HTML y utilizarla para generar el shadow DOM.
getTemplate() { const template = document.createElement('template'); template.innerHTML = ` <section> <h2 class="title">Soy un título</h3> <div> <p>Soy un párrafo</p> </div> </section> ${this.getStyles()} `; return template; }
En este ejemplo, la función getTemplate() genera una plantilla que incluye un título h2 y un párrafo p. La función getStyles() se llama para incluir estilos personalizados.
.
Estilos personalizados
Puedes incluir estilos personalizados en un elemento personalizado utilizando el método getStyles(). Este método retorna un string con un bloque de estilos CSS que se incluirá en la plantilla de HTML.
getStyles() { return ` <style> h2 { color: purple; } </style> `; }
Renderizado
Una vez que has generado la plantilla de HTML, puedes utilizar la función render() para renderizar el contenido en el shadow DOM.
render() { this.shadowRoot.append(this.getTemplate().content.cloneNode(true)) }
La función render() llama al método append() en el shadow root del elemento personalizado para agregar el contenido generado por getTemplate() al árbol DOM.
.
Conexión al DOM
La función connectedCallback() se llama cuando el elemento personalizado se agrega al árbol DOM. Puedes utilizar esta función para realizar cualquier configuración adicional, como renderizar el contenido.
connectedCallback() { this.render(); }
En este ejemplo, la función connectedCallback() llama a la función render() para renderizar el contenido del elemento personalizado.
.
Definición del elemento personalizado
Finalmente, debes definir el nuevo elemento personalizado utilizando el método customElements.define(). Esto te permite utilizar el elemento en tu página web.
customElements.define('my-element', MyElement);
En este ejemplo, el nombre del elemento personalizado es my-element y la clase que lo define es MyElement.
.
Uso del elemento personalizado
Una vez que has definido tu elemento personalizado, puedes utilizarlo en cualquier página web. Para hacerlo, simplemente agrega el nuevo elemento personalizado a tu HTML como cualquier otro elemento HTML.
<my-element></my-element>
