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?
Introducción a los Web Components
Web Components: Creación y Uso Práctico con JavaScript
Web Components: Solución a la Fragmentación del Ecosistema JavaScript
Construcción de Web Components reutilizables como piezas de Lego
Creación de Web Components con Custom Elements y Shadow DOM
Ventajas y Usos Prácticos de Web Components
Ciclo de vida de los Web Components
Ciclo de Vida de Componentes Web: Constructor y Callbacks
Web Components
Creación de Web Components con Custom Elements API
Uso de Templates para Componentes Web con JavaScript
Uso de Shadow DOM para Encapsular Estilos en Componentes Web
Manejo de datos
Componentes Web: Uso de Slots para Contenido Dinámico
Renderizado de Contenido Dinámico con Slots en Web Components
Manipulación de Atributos en Componentes Web
Manipulación Dinámica de Atributos en Componentes Web
Ciclo de vida en componentes web: Disconnected Callback
Estilos en Componentes
Estilos Avanzados para Web Components con Pseudoclase :host
Estilos con Pseudoelemento ::slotted en Shadow DOM
Variables CSS en Componentes Web Reutilizables
Proyecto
Construcción de tarjeta de producto eCommerce responsive
Estructura Básica de Componentes Web con JavaScript y DOM Sombra
Inyección de Datos en Componentes Web para eCommerce
Web Components de terceros
Uso de Componentes Web Reutilizables en Proyectos
Conclusiones
Construcción de Plataformas con Web Components
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
El Shadow DOM es una tecnología que permite a los desarrolladores web definir componentes de interfaz encapsulados, protegiendo su estructura y estilos en el navegador. A menudo, los desarrolladores enfrentan problemas cuando los estilos de sus proyectos se reescriben al agregar bibliotecas de CSS, como Bootstrap. Esto puede llevar a la mala práctica de usar !important
para mantener estilos deseados. Sin embargo, el Shadow DOM ofrece una solución a esta problemática al crear un entorno aislado dentro del DOM global, de manera que los estilos externos no afecten a los internos del componente.
Integrar el Shadow DOM en tus componentes resulta ser un proceso sencillo y extremadamente útil para mantener la integridad de los estilos CSS. A continuación, se detallan los pasos básicos:
Crear la instancia del Shadow DOM: Dentro del constructor de tu componente, utiliza el método attachShadow
.
this.attachShadow({ mode: 'open' });
Transferir el contenido al Shadow DOM: Al crear un componente web, el contenido del mismo se debe adjuntar específicamente al Shadow DOM.
this.shadowRoot.appendChild(template.content.cloneNode(true));
Manipulación del Shadow DOM: En vez de utilizar document
, se debe operar directamente con shadowRoot
para cambiar o consultar los elementos dentro del Shadow DOM.
El modo del Shadow DOM puede ser abierto o cerrado. Por buenas prácticas, se suele elegir el modo "open" para permitir que elementos internos del Shadow DOM sean accesibles desde fuera del componente, promoviendo una mayor reutilización y flexibilidad. Esta elección posibilita ver el contenido y realizar interacciones con los componentes, como por ejemplo en etiquetas estándar de HTML5 (<input>
, <video>
, etc.).
Con el Shadow DOM, los estilos CSS internos se encapsulan, evitando que los estilos externos impacten su diseño. Esto se demuestra fácilmente cuando dos h2
con estilos conflictivos no son reescritos, uno enfocándose en azul y otro en rojo, diferenciados por su ámbito de aplicación dentro o fuera del componente encapsulado.
Para inspeccionar el Shadow DOM, es vital activar la visualización en las herramientas de desarrollo del navegador. Sigue estos pasos para habilitarlo:
Settings
-> Elements
.Una vez activada, podrás evaluar los elementos dentro del Shadow DOM de cualquier página, permitiéndote entender mejor su estructura y funcionamiento.
Esta guía debería haberte dado una comprensión clara de las funciones del Shadow DOM y sus aplicaciones. ¡Anímate a implementarlo en tus futuros proyectos para maximizar la eficiencia y mantenimiento de tus estilos CSS!
Aportes 14
Preguntas 3
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 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:
https://i.imgur.com/wbL6voa.png
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>
<h2>Hola mundo!</h2>
<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
.
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 Element.shadowRoot
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
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!!!
muy interesante la clase
Apuntes de esta clase:
<h4>Shadow DOM</h4>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
https://platzi.com/clases/1665-preprocesadores/22294-selectores-de-css/
Esta clase me gusto y se aborda todo el tema de especifidad
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.”
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 {
// ...
}
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
}
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" });
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</h2>
<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.
.
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>
`;
}
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.
.
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.
.
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
.
.
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>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?