A. Custom element

Mecanismo para declarar elementos personalizados que incluyan apariencia y comportamiento.
Su tipo de elemento debe llevar al menos un guión (-).
Son elementos de fraseo, por lo que su display predeterminado es inline-block.
Siempre se pone la etiqueta de inicio y la de final.
Esta tecnología ya viene incluida dentro de los navegadores, pero hay otros productos que implementan componentes web, como son:

React

https://es.reactjs.org/

Vue.js

https://vuejs.org/

Angular.js

https://angular.io/

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<title>Custom elements</title>

<style>

elemento-1 {

color: blue;

}

elemento-2 {

display: block;

background-color: aqua;

}

</style>

</head>

<body>

<h1>Custom elements</h1>

<elemento-1>Hola</elemento-1>

<elemento-1>

<em>Saludos</em>

</elemento-1>

<elemento-2>

Estoy de buenas 😁

</elemento-2>

</body>

</html>

B. Los custom element en acción

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.

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<title>Acción</title>

class Elemento3

extends HTMLElement {

connectedCallback() {

this.innerHTML = /* html */

`Estoy volando🚁

alto

</strong>.`

this.addEventListener("click",

() => this.clic())

}

clic() {

alert("ouch")

}

customElements.define(

"elemento-3", Elemento3)

</script>

<style>

elemento-3 {

cursor: pointer;

}

</style>

</head>

<body>

<h1>Acción</h1>

<elemento-3></elemento-3>

<p>Saludos desde la tierra.</p>

<elemento-3></elemento-3>

</body>

</html>

C. Uso de atributos

Los atributos de la etiqueta HTML se recuperan con this.getAttribute(nombreDelAtributo).
En el caso de los atributos booleanos, sSe puede verificar si están presentes en la etiqueta HTML usando this.hasAttribute(nombreDelAtributo).

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>

<head>

content="width=device-width">

<title>Atributos</title>

class MiSaludo

extends HTMLElement {

connectedCallback() {

const nombre =

this.getAttribute("nombre")

const alegre =

this.hasAttribute("alegre")

const icono =

alegre ? "😄" : "🖐"

this.innerHTML = /* html */

`${icono}

hola

<strong>${nombre}</strong>.`

}

customElements.define(

"mi-saludo", MiSaludo)

</script>

</head>

<body>

<h1>Atributos</h1>

<p>

<mi-saludo nombre="pp">

</mi-saludo>

</p>

<p>

<mi-saludo nombre="tt" alegre>

</mi-saludo>

</p>

</body>

</html>

12. Custom elements

A. Custom element

Ejemplo

Salida

B. Los custom element en acción

Ejemplo

Salida

C. Uso de atributos

Ejemplo

Salida

D. Resumen