Trabaje con su propio HTML con componentes web
Únase a Raymond Camden, Sr. Evangelista de desarrolladores en Adobe, para aprender los conceptos básicos de los componentes web, incluidos los elementos personalizados, el DOM en la sombra y las plantillas de HTML. Explore ejemplos del mundo real como la incrustación de PDF y la creación de tablas ordenables para mejorar sus aplicaciones con soluciones modernas y reutilizables.
Discusión de comunidad
Continuar la conversación en la discusión de la comunidad de Adobe Developers Live.
Principales conclusiones
- Introducción a los componentes web Los componentes web permiten a los desarrolladores crear elementos HTML personalizados con su propia apariencia e interactividad, definidas mediante JavaScript.
- Los componentes web de Core Technologies se han creado con tres tecnologías principales** elementos personalizados, DOM en la sombra y plantillas de HTML.
- Elementos personalizados Los elementos personalizados permiten crear nuevas etiquetas de HTML. Deben usar estuche kebab e incluir una raya. Las clases de JavaScript se utilizan para definir su comportamiento.
- DOM de sombra El DOM de sombra proporciona encapsulación para el árbol DOM de un componente, lo que evita la pérdida de CSS y permite un estilo más controlado.
- Plantillas de HTML Plantillas de HTML permiten la definición de HTML y CSS que se pueden clonar y anexar al DOM. Sin embargo, el moderador prefiere utilizar espacios en lugar de plantillas para una mejor distribución y flexibilidad.
- Atributos y eventos Los elementos personalizados pueden tener atributos y controladores de eventos, como connectedCallback y connectedCallback, para administrar su comportamiento cuando se agregan o eliminan del DOM.
- Ranuras Las ranuras permiten la inserción de contenido en los componentes web, lo cual admite ranuras predeterminadas y con nombre para una administración de contenido más flexible.
- Ejemplos reales Algunos ejemplos son un visor incrustado de PDF, marcadores de posición de imagen y un clasificador de tablas, que muestran aplicaciones prácticas de componentes web.
- Mejora progresiva Los componentes web pueden mejorar el HTML existente sin romper la funcionalidad si JavaScript no se puede cargar.
- Pasos siguientes y recursos En la presentación se sugiere explorar la participación en formularios, el DOM de sombra declarativo, los atributos de HTML personalizados y el procesamiento en el servidor. Los recursos incluyen MDN, webcomponents.org y el libro "Web Components in Action" de Ben Farrell.
recommendation-more-help
3c5a5de1-aef4-4536-8764-ec20371a5186