C. Uso de atributos

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

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>Atributos</title>
9 <script>
10 class MiSaludo
11 extends HTMLElement {
12 connectedCallback() {
13 const nombre =
14 this.getAttribute("nombre")
15 const alegre =
16 this.hasAttribute("alegre")
17 const icono =
18 alegre ? "😄" : "🖐"
19 this.innerHTML = /* html */
20 `${icono}
21 hola
22 <strong>${nombre}</strong>.`
23 }
24 }
25 customElements.define(
26 "mi-saludo", MiSaludo)
27 </script>
28</head>
29
30<body>
31 <h1>Atributos</h1>
32 <p>
33 <mi-saludo nombre="pp">
34 </mi-saludo>
35 </p>
36 <p>
37 <mi-saludo nombre="tt" alegre>
38 </mi-saludo>
39 </p>
40</body>
41
42</html>
skip_previous skip_next