<badge>Warning</badge>               <!--  Incorrecto -->
<warning-badge>Warning</warning-badge> <!--  Correcto -->

<script>
  const number = 42;
  const badge = document.querySelector("badge");
  const warning = document.querySelector("warning-badge");

  number.constructor.name     // Number
  badge.constructor.name      // HTMLUnknownElement
  warning.constructor.name    // HTMLElement
</script>

<warning-badge pulsing>En construcción</warning-badge>

<style>
  warning-badge {
    --stripe: 22px;
    --color: #FFE000;
    --glow: rgb(100% 90% 0 / 25%);

    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    color: var(--color);
    /* ... Estilos ... */
  }
</style>

warning-badge::before {
  /* Exterior del badge */
}

warning-badge::after {
  /* Interior oscuro */
}

warning-badge[pulsing]::after {
  /* Animación de pantalla */
}

class WarningBadge extends HTMLElement {   1️⃣

  constructor() {   2️⃣
    super(); 3️⃣
  }

}

customElements.define("warning-badge", WarningBadge); 4️⃣

1️⃣ // Código al inicio del archivo

class WarningBadge extends HTMLElement {
  constructor() {
    super();
    console.log("Etiqueta cargada"); 2️⃣
  }
}

customElements.define("warning-badge", WarningBadge);
console.log("Componente cargado"); 3️⃣

class WarningBadge extends HTMLElement {

  constructor() { /* ... */ }
  connectedCallback() { /* ... */ } 1️⃣
  disconnectedCallback() { /* ... */ } 2️⃣

}

class WarningBadge extends HTMLElement {
  #private = 42;
  public = "ManzDev";

  get value() {
    return `Data: ${this.#private}`;
  }

  method() { /* ... */ }
  #method() { /* ... */ }
}

class WarningBadge extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.setHTMLUnsafe(/* html */`
      <div class="container">
        ...
      </div>
    `);
  }
}

const DEFAULT_VALUE = 42;

class WarningBadge extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.value = this.getAttribute("value") ?? DEFAULT_VALUE;
    this.isOpen = this.hasAttribute("open") ?? false;
    this.render();
  }
}

• En el connectedCallback:
  • Se leen atributos
  • Se guardan en propiedades
  • ↑ (Más fácil el acceso)
    
    
• Utilizar el ?? para definir un valor por defecto
  
  
• Separar en una constante el valor
  • Es más legible
  • Es más fácil de modificar en el futuro

class WarningBadge extends HTMLElement {

  static get observedAttributes() {
    return ["src", "disabled"]
  }

  attributeChangedCallback(name, old, now) {
    console.log(`El atributo ${name}: ${old} → ${now}`);
  }
}

customElements.define("warning-badge", WarningBadge);

class UserCard extends HTMLElement {
  connectedCallback() {
    this.setHTMLUnsafe(/* html */`
      <style>
        @scope {                <---- 
          user-card {
            /* ... */
          }
          .card {
            /* ... */
          }
          img {
            /* ... */
          }
          h1 { /* ... */ }
        }
      </style>
      <div class="card">
        <!-- HTML -->
      </div>
    `);
  }
}

customElements.define("user-card", UserCard);

<div class="element">Contenido</div>

<script>
  const $el = document.querySelector(".element");

  // Modificamos el DOM normal de la página
  $el.setHTMLUnsafe(/* html */`Light DOM`);

  // Añadimos un Shadow DOM (oculta el DOM normal)
  $el.attachShadow({ mode: "open" });

  // Modificamos el DOM particular (Shadow DOM)
  $el.shadowRoot.setHTMLUnsafe(/* html */`Shadow DOM`);
</script>

<!-- Declarative Shadow DOM (SSR/Backend) -->

<div class="element">
  <template shadowrootmode="open">
    Shadow DOM
  </template>
  Light DOM
</div>

• Shadow DOM es un DOM particular en un elemento.
• Cuando lo añades, ocultas el DOM general (Light DOM).
• Sigue existiendo y es modificable, pero no se ve.
  
  
• Con element accedes → Light DOM (no visible)
• Con element.shadowRoot accedes → Shadow DOM (visible)
  
  
  
• El CSS añadido al Shadow DOM, sólo afecta a ese DOM.
  
  
• Declarative Shadow DOM: ideal para backend y SSR

user-card {
  --theme-color: deeppink; 2️⃣
}

1️⃣ El color temático por defecto es indigo
2️⃣ Si el usuario define un color, se toma ese como temático
3️⃣ El interior del componente crea colores derivados

/* Recuerda:
   Las variables CSS se filtran a través del Shadow DOM
*/

/* Dentro del componente */
.container { 3️⃣
  --light-color: color-mix(
    in srgb, var(--theme-color, indigo), white 50%
  );

  background: black;
  color: white;
  border-bottom: 2px solid var(--theme-color, indigo);

  strong { color: var(--light-color); }

  .decoration { background: var(--theme-color, indigo); }
}

:host {
  display: block flow;
  background: indigo;
  padding: 0.5rem;
}

:host([open]) {
  /* ... */
}

:host-context(.dark) {
  /* ... */
}

<!-- `:host` es el contenedor del custom element: `<user-card>` -->
<user-card></user-card>

<!-- `:host()` es el contenedor con un selector específico -->
<user-card open></user-card>

<!-- `:host-context()` es el contenedor dentro de un contexto -->
<body class="dark">
  <div class="container">
    <user-card></user-card>
  </div>
</body>

class UserCard extends HTMLElement {
  /* ... */

  connectedCallback() { 2️⃣
    this.shadowRoot.setHTMLUnsafe(/* html */`
      <div class="container">
        <img part="image" src="image.png" alt="Image">
        <h2 part="name">${this.name}</h2>
      </div>
    `);
  }
}

customElements.define("user-card", UserCard);

user-card::part(image) {
  /* ... */
}

user-card::part(name) {
  /* ... */
}