Para definir contenido y comportamiento propio debes crear una clase que
extienda
HTMLElement.
El método
connectedCallback
se invoca cuando el elemento se agrega a la página y en el debe agregarse
el contenido propio y el manejo de eventos.
Luego hay que asociar un tipo de elemento con esa clase usando la
instrucción
customElements.define("tipo-de-elemento", Clase).
Posteriormente también puedes definirle reglas de estilo.
En este ejemplo, el contenido HTML se añade desde una plantilla de texto. Por medio de un plugin de Visual Studio Code se colorea el texto para que puedas distinguir los elementos y sus atributos. También es posible usar archivos de extensión jsx que permiten poner directamente las etiquetas en el código, pero requieren compilar el programa para generar un archivo JavaScript, que es el que se añade al sitio web.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | |
| 4 | <head> |
| 5 | <meta charset="UTF-8"> |
| 6 | <meta name="viewport" |
| 7 | content="width=device-width"> |
| 8 | <title>Acción</title> |
| 9 | <script> |
| 10 | class Elemento3 |
| 11 | extends HTMLElement { |
| 12 | connectedCallback() { |
| 13 | this.innerHTML = /* html */ |
| 14 | `Estoy volando🚁 |
| 15 | <strong> |
| 16 | alto |
| 17 | </strong>.` |
| 18 | this.addEventListener("click", |
| 19 | () => this.clic()) |
| 20 | } |
| 21 | clic() { |
| 22 | alert("ouch") |
| 23 | } |
| 24 | } |
| 25 | customElements.define( |
| 26 | "elemento-3", Elemento3) |
| 27 | </script> |
| 28 | <style> |
| 29 | elemento-3 { |
| 30 | cursor: pointer; |
| 31 | } |
| 32 | </style> |
| 33 | </head> |
| 34 | |
| 35 | <body> |
| 36 | <h1>Acción</h1> |
| 37 | <elemento-3></elemento-3> |
| 38 | <p>Saludos desde la tierra.</p> |
| 39 | <elemento-3></elemento-3> |
| 40 | </body> |
| 41 | |
| 42 | </html> |