Coloque seu próprio HTML com os Componentes Web
Junte-se a Raymond Camden, Sr. Developer Evangelist no Adobe, para saber mais sobre as noções básicas de Componentes Web, incluindo elementos personalizados, DOM de sombra e modelos de HTML. Explore exemplos reais como a incorporação de PDF e a criação de tabelas classificáveis para aprimorar seus aplicativos com soluções reutilizáveis e modernas.
Discussão da comunidade
Continue a conversa na discussão da Comunidade do Adobe Developers Live.
Principais aprendizados
- Introdução aos Componentes Web Os componentes Web permitem que os desenvolvedores criem elementos HTML personalizados com aparência e interatividade próprias, definidas com o JavaScript.
- Tecnologias principais Os componentes da Web são criados com o uso de três elementos personalizados de tecnologias principais**, shadow DOM e modelos de HTML.
- Elementos personalizados Os elementos personalizados permitem a criação de novas marcas de HTML. Eles devem usar o kebab-case e incluir um traço. As classes JavaScript são usadas para definir seu comportamento.
- DOM de sombra O DOM de sombra fornece encapsulamento para a árvore DOM de um componente, evitando o vazamento de CSS e permitindo um estilo mais controlado.
- Modelos HTML Os modelos HTML permitem a definição de HTML e CSS que podem ser clonados e anexados ao DOM. No entanto, o apresentador prefere usar slots em vez de modelos para melhor distribuição e flexibilidade.
- Atributos e Eventos Os elementos personalizados podem ter atributos e manipuladores de eventos, como connectedCallback e disconnectedCallback, para gerenciar seu comportamento quando adicionados ou removidos do DOM.
- Slots Slots permitem a inserção de conteúdo em componentes da Web, oferecendo suporte a slots padrão e nomeados para um gerenciamento de conteúdo mais flexível.
- Exemplos reais Os exemplos incluem um visualizador incorporado de PDF, espaços reservados para imagens e um classificador de tabela, demonstrando aplicações práticas de componentes Web.
- Aprimoramento progressivo Os componentes da Web podem aprimorar o HTML existente sem interromper a funcionalidade se o JavaScript não carregar.
- Próximas etapas e recursos A apresentação sugere explorar a participação de formulários, o DOM de sombra declarativa, atributos de HTML personalizados e renderização no lado do servidor. Os recursos incluem MDN, webcomponents.org, e o livro "Web Components in Action" de Ben Farrell.
recommendation-more-help
3c5a5de1-aef4-4536-8764-ec20371a5186