From b900c7f3484a3d026f24f89abd64edbd7991f950 Mon Sep 17 00:00:00 2001 From: Jorge Mendez Ortega Date: Fri, 11 Sep 2026 14:09:31 -0600 Subject: [PATCH] feat(app): p-004 templates y slots --- README.md | 46 ++++++-- index.html | 12 +++ src/assets/gato.png | Bin 0 -> 46722 bytes src/components/P-004/README.md | 178 +++++++++++++++++++++++++++++++ src/components/P-004/index.js | 14 +++ src/components/P-004/styles.js | 39 +++++++ src/components/P-004/template.js | 15 +++ src/index.js | 1 + 8 files changed, 296 insertions(+), 9 deletions(-) create mode 100644 src/assets/gato.png create mode 100644 src/components/P-004/README.md create mode 100644 src/components/P-004/index.js create mode 100644 src/components/P-004/styles.js create mode 100644 src/components/P-004/template.js diff --git a/README.md b/README.md index 7c2e5f9..b10ab39 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,53 @@ -

- Curso WebComponents -

- # Temario: WebComponents de Cero a Dios (Clean Code & Modern Standard) +![Curso WebComponents](./assets/logo.jpg) + Este es el plan de estudios estructurado de forma progresiva. Conforme avanzamos, iré marcando los módulos completados. - [x] 📌 Módulo 1: Setup del Entorno & Fundamentos Clave (Actual). -- 📍 **[Apuntes](./src/components/P-001/)** - 🎟️ **[P-001 | Crear componente de insignia de estado (status-badge)](https://github.com/Code-Dojo-Labs/curso-webcomponents/issues/18)** +- 📝 **[Apuntes](./src/components/P-001/)** + +--- + - [x] 📌 Módulo 2: Custom Elements (v1) & Lifecycle Callbacks. -- 📍 **[Apuntes](./src/components/P-002/)** - 🎟️ **[🏗️ P-002 | Hacer reactivo el componente status-badge a cambios de estado en vivo](https://github.com/Code-Dojo-Labs/curso-webcomponents/issues/22)** -- [ ] 📌 Módulo 3: Shadow DOM & Encapsulamiento Visual. -- 📍 **[Apuntes](./src/components/P-003/)** +- 📝 **[Apuntes](./src/components/P-002/)** + +--- + +- [x] 📌 Módulo 3: Shadow DOM & Encapsulamiento Visual. - 🎟️ **[🏗️ P-003 | Encapsular el componente status-badge usando Shadow DOM y Adopted StyleSheets](https://github.com/Code-Dojo-Labs/curso-webcomponents/issues/26)** +- 📝 **[Apuntes](./src/components/P-003/)** + +--- + +- [x] 📌 Módulo 4: `