A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Shadow DOM

9/22
Recursos

Aportes 8

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

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?

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
.

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

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

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/

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:

  • Shadow host: El nodo regular del DOM al que es atado el shadow DOM.
  • Shadow tree: El √°rbol DOM dentro del shadow DOM.
  • Shadow boundary: El punto en el que el shadow DOM termina¬†y el DOM regular comienza.
  • Shadow root: El nodo ra√≠z del √°rbol Shadow.
    „Ö§

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.

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

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