Componentes Web personalizados y Stencil.js: Crear elementos HTML reutilizables

Cree etiquetas HTML personalizadas, reutilizables y independientes de la plataforma mediante API de navegador nativas y Stencil.js para optimizar su flujo de trabajo de desarrollo web en cualquier marco moderno.

4.9 (3,920) ⏱ 1 h 54 min 📚 6 lecciones

Sobre este curso

Las etiquetas HTML estándar son muy funcionales, pero los diseños web modernos a menudo requieren elementos de interfaz especializados como pestañas personalizadas, modales o cajones laterales que no existen de forma nativa, haciendo que su código de interfaz de usuario sea altamente reutilizable en diferentes proyectos y configuraciones. En este curso basado en texto, pasará de escribir marcado estándar a diseñar sus propios elementos personalizados robustos y encapsulados.Comprenderá cómo aprovechar las tecnologías nativas del navegador junto con Stencil.js para compilar componentes altamente eficientes y compatibles con estándares que funcionan sin problemas en JavaScript vanilla o en cualquier marco importante. Lo que aprenderás: - Comprenda las especificaciones fundamentales de los componentes web nativos, incluidos los elementos personalizados, Shadow DOM y las plantillas HTML. - Construir etiquetas personalizadas completamente encapsuladas y aisladas por estilo que no entren en conflicto con el resto del CSS de su aplicación. - Administrar el estado del componente, pasar datos a través de atributos y comunicar cambios mediante eventos personalizados. - Implemente las mejores prácticas de accesibilidad, incluidos los roles ARIA y la administración de enfoque, para garantizar que sus elementos personalizados sean utilizables por todos. - Aproveche Stencil.js para acelerar el desarrollo con TypeScript, JSX y la vinculación de datos reactivos eficiente. - Integre e implemente sus elementos personalizados en cualquier aplicación o marco web moderno. Comenzará explorando las definiciones principales y las API nativas que impulsan los elementos personalizados antes de pasar a flujos de trabajo avanzados con Stencil.js.A través de explicaciones escritas claras y fragmentos de código prácticos, aprenderá a estructurar, dar estilo y enviar componentes listos para la producción. Este curso está diseñado para desarrolladores web y diseñadores que desean construir interfaces de usuario modulares; familiaridad básica con HTML, CSS y JavaScript introductorio es todo lo que necesita para comenzar. Comience a leer hoy para dominar el futuro del desarrollo web modular.

Lo que obtendrás

  • 📜 Certificado de finalización
    Añádelo a tu perfil de LinkedIn
  • 💬 Personal AI tutor
    Stuck on a lesson? Ask your built-in tutor anything, any time.
  • ♾️ Acceso de por vida
    Vuelve cuando quieras, sin caducidad
  • 📱 Teléfono o computadora
    Funciona en cualquier dispositivo
  • 💸 Reembolso de 30 días
    Sin preguntas
  • Breve y enfocado
    1 h 54 min de contenido práctico

Reseñas (7)

Despina Nikolaidou GR
★ 4 · 2025-10-21T17:44:52+00:00

Realmente disfruté el flujo de esto. Los ejemplos estaban en el lugar y me ayudaron a comprender el material rápidamente.

Stefan Pretorius ZA Estudiante verificado
★ 4 · 2025-09-05T21:13:52+00:00

Contenido sólido aquí. Si bien un par de los módulos podrían haber sido más detallados, el valor general y la aplicabilidad son altos.

Noah Johnson AU Estudiante verificado
★ 4 · 2025-08-23T06:36:52+00:00

Los ejemplos eran muy claros y realmente ayudaron a solidificar los conceptos. Definitivamente vale la pena el tiempo invertido.

Ana Silva PT Estudiante verificado
★ 5 · 2025-06-14T20:52:52+00:00

Estoy muy contento de haber tomado esto. La forma en que se desglosaron los conceptos lo hizo súper accesible.

Emma Ruiz UY Estudiante verificado
★ 3 · 2025-02-18T12:45:52+00:00

Me pareció útil para un repaso, pero no estoy seguro de que sea el mejor punto de partida para un principiante completo.

Leonardo De Luca IT
★ 3 · 2025-01-02T23:07:52+00:00

Contenido sólido y presentado claramente. Aprecié las aplicaciones del mundo real que se mostraron.Podría haber usado algunas oportunidades de práctica más.

Romain Michel MC Estudiante verificado
★ 3 · 2024-12-21T02:35:52+00:00

Es una introducción decente, pero podría beneficiarse de ejemplos más diversos y un flujo ligeramente mejor entre los módulos.

Escribir una reseña

Te pediremos iniciar sesión después de enviar — tu borrador se guarda.

Otros también tomaron

Preguntas frecuentes

¿Qué necesito para tomar este curso? +

Solo un teléfono o computadora con internet. Sin instalaciones ni hardware especial.

¿Cómo pago? +

Con tarjeta a través de Stripe, o con criptomonedas. No almacenamos datos de tarjeta — Stripe los gestiona de forma segura.

¿Puedo obtener un reembolso? +

Sí — reembolso completo en 30 días, sin preguntas.

¿Por cuánto tiempo tendré acceso? +

Para siempre. Una vez comprado, el curso es tuyo para revisarlo cuando quieras.

¿Obtendré un certificado? +

Sí. Al finalizar recibirás un certificado que puedes añadir a tu perfil de LinkedIn.

Diseñado para profesionales en
Tecnología Diseño Finanzas Marketing Salud Educación Hostelería Manufactura