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 = `
+
+
+ `;
+ }
+
+}
+
+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 @@
+
+