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

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>

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).