Un elemento personalizado en HTML

Una etiqueta tuya, con el comportamiento atado a la etiqueta y no a un selector.

<word-count for="editor">0 words</word-count>

<textarea id="editor" rows="4"></textarea>

<script>
  class WordCount extends HTMLElement {
    connectedCallback() {
      const target = document.getElementById(this.getAttribute('for'));
      target.addEventListener('input', () => {
        const words = target.value.trim().split(/\s+/).filter(Boolean);
        this.textContent = `${words.length} words`;
      });
    }
  }
  customElements.define('word-count', WordCount);
</script>

Cómo funciona

1. El nombre de un elemento personalizado debe contener un guion.
2. connectedCallback corre cuando entra al documento.
3. Hasta que el script lo define, es un elemento en línea desconocido.

Palabras clave y builtins usados aquí

• Boolean
• class
• const
• document
• extends
• this

El intento, en números

Líneas

16

Caracteres a escribir

440

Tokens

113

Ritmo de tres estrellas

80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 85 segundos.

Escribe este fragmento

Paso 2 de 3 en Plantillas y componentes; paso 6 de 13 en HTML interactivo.

← Anterior Siguiente →