From 5976fe512cb68722d2ffae758331afad8f1e7fe0 Mon Sep 17 00:00:00 2001 From: Jorge Mendez Ortega Date: Sun, 23 Aug 2026 23:08:23 -0600 Subject: [PATCH] feat(app): nmas-004 uso de atributos --- src/components/index.js | 1 + src/components/pr3/Dynamic.js | 67 +++++++++++++++++++++++++++++++++++ src/index.html | 2 ++ 3 files changed, 70 insertions(+) create mode 100644 src/components/pr3/Dynamic.js diff --git a/src/components/index.js b/src/components/index.js index 4e62c15..48ce98b 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,2 +1,3 @@ import "./pr1/Badge.js"; import "./pr2/Card.js"; +import "./pr3/Dynamic.js"; diff --git a/src/components/pr3/Dynamic.js b/src/components/pr3/Dynamic.js new file mode 100644 index 0000000..8142fc0 --- /dev/null +++ b/src/components/pr3/Dynamic.js @@ -0,0 +1,67 @@ +class Dynamic extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.render(); + } + + disconnectedCallback() { + console.log("Componente Desmontado"); + } + + // se declaran los atributos + static get observedAttributes() { + return [ + "role", + "active", + ]; + } + + // Detecta el cambio de los atributos + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`); + this.render(); + } + } + + render() { + const role = this.getAttribute("role") || "Default role"; + const active = this.hasAttribute("active") || false; + this.shadowRoot.innerHTML = ` + +
+

Role: ${role}

+
+ `; + } + +} + +window.customElements.define("wc-dynamic", Dynamic); diff --git a/src/index.html b/src/index.html index 7ffe0e9..1ea55b5 100644 --- a/src/index.html +++ b/src/index.html @@ -8,6 +8,8 @@ + +