From 8d3d12c802e9dfc5a07aef2c75a882688a068f9b Mon Sep 17 00:00:00 2001
From: Jorge Mendez Ortega <jorge.mendez.ortega@gmail.com>
Date: Mon, 24 Aug 2026 11:35:59 -0600
Subject: [PATCH] feat(app): nmas-006  uso de templates

---
 src/components/index.js        |  1 +
 src/components/pr6/Template.js | 85 ++++++++++++++++++++++++++++++++++
 src/index.html                 |  5 ++
 3 files changed, 91 insertions(+)
 create mode 100644 src/components/pr6/Template.js

diff --git a/src/components/index.js b/src/components/index.js
index 1bc2c4d..d90825d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,3 +2,4 @@ import "./pr1/Badge.js";
 import "./pr2/Card.js";
 import "./pr3/Dynamic.js";
 import "./pr5/Button.js";
+import "./pr6/Template.js";
diff --git a/src/components/pr6/Template.js b/src/components/pr6/Template.js
new file mode 100644
index 0000000..e97a018
--- /dev/null
+++ b/src/components/pr6/Template.js
@@ -0,0 +1,85 @@
+const TEMPLATE = document.createElement('template');
+
+TEMPLATE.innerHTML = `
+    <style>
+        :host {
+            display: block;
+            background-color: rgb(39, 40, 34, .8);
+            backdrop-filter: blur(5px);
+            position: fixed;
+            z-index: 9999;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+        }
+        :host * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :host > section {
+            background-color: #fff;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            width: 50%;
+            height: auto;
+            margin: 10% auto;
+        }
+        .header {
+            background-color: rgb(39, 40, 34);
+            padding: 10px;
+            color: #fff;
+            border-radius: 10px 10px 0 0;
+        }
+        .content {
+            background-color: #FFF;
+            padding: 10px;
+            color:rgb(39, 40, 34);
+            font-weight: 600;
+        }
+        .footer {
+            background-color: rgb(39, 40, 34);
+            padding: 10px;
+            border-radius: 0 0 10px 10px;
+            color: #fff;
+            font-size: 10px;
+            text-align: left;
+        }
+    </style>
+    <section>
+        <header>
+            <h2 class="header">
+                <slot name="header">Header</slot>
+            </h2>
+        </header>
+        <article>
+            <p class="content">
+                <slot></slot>
+            </p>
+        </article>
+        <footer class="footer">
+            <slot name="footer"></slot>
+        </footer>
+    </section>
+`;
+
+
+
+class Template extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.appendChild(TEMPLATE.content.cloneNode(true));
+    }
+}
+
+window.customElements.define('wc-template', Template);
diff --git a/src/index.html b/src/index.html
index f9b8077..d233611 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,6 +13,11 @@
     <wc-button type="danger">Danger gakusei</wc-button>
     <wc-button type="primary">Primary gakusei</wc-button>
     <wc-button>Default gakusei</wc-button>
+    <wc-template>
+        <div slot="header">Header content</div>
+        <div>Main content</div>
+        <div slot="footer">Footer content</div>
+    </wc-template>
     <script type="module" src="./components/index.js"></script>
 </body>
 </html>