Componentes Web personalizados e Stencil.js: Crie elementos HTML reutilizáveis

Crie tags HTML personalizadas, reutilizáveis e independentes de plataforma usando APIs de navegador nativas e Stencil.js para agilizar seu fluxo de trabalho de desenvolvimento da Web em qualquer estrutura moderna.

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

Sobre este curso

As tags HTML padrão são altamente funcionais, mas os layouts da Web modernos geralmente exigem elementos de interface especializados, como guias personalizadas, modais ou gavetas laterais que não existem nativamente, tornando o código da interface do usuário altamente reutilizável em diferentes projetos e configurações. Neste curso baseado em texto, você fará a transição de escrever marcação padrão para projetar seus próprios elementos personalizados robustos e encapsulados.Você entenderá como aproveitar as tecnologias nativas do navegador junto com o Stencil.js para compilar componentes altamente eficientes e compatíveis com padrões que funcionam perfeitamente em JavaScript ou em qualquer estrutura importante. O que você vai aprender: - Entenda as especificações fundamentais dos componentes da Web nativos, incluindo elementos personalizados, Shadow DOM e modelos HTML. - Crie tags personalizadas totalmente encapsuladas e isoladas por estilo que não entrem em conflito com o resto do CSS do seu aplicativo. - Gerencie o estado do componente, passe dados por meio de atributos e comunique alterações usando eventos personalizados. - Implemente as melhores práticas de acessibilidade, incluindo funções ARIA e gerenciamento de foco, para garantir que seus elementos personalizados sejam utilizáveis por todos. - Aproveite o Stencil.js para acelerar o desenvolvimento com TypeScript, JSX e vinculação de dados reativos eficiente. - Integre e implante seus elementos personalizados em qualquer aplicativo ou estrutura da web moderna. Você começará explorando as definições principais e as APIs nativas que alimentam elementos personalizados antes de passar para fluxos de trabalho avançados com Stencil.js.Através de explicações claras e fragmentos de código práticos, você aprenderá a estruturar, estilizar e enviar componentes prontos para produção. Este curso é projetado para desenvolvedores e designers da web que desejam criar interfaces de usuário modulares; familiaridade básica com HTML, CSS e JavaScript introdutório é tudo o que você precisa para começar. Comece a ler hoje para dominar o futuro do desenvolvimento web modular.

O que você vai receber

  • 📜 Certificado de conclusão
    Adicione ao seu perfil do LinkedIn
  • 💬 Personal AI tutor
    Stuck on a lesson? Ask your built-in tutor anything, any time.
  • ♾️ Acesso vitalício
    Volte quando quiser, sem expirar
  • 📱 Celular ou computador
    Funciona em qualquer dispositivo
  • 💸 Reembolso em 30 dias
    Sem perguntas
  • Curto e focado
    1 h 54 min de conteúdo prático

Avaliações (7)

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

Machine Translated Gostei muito do fluxo disso. Os exemplos estavam no local e me ajudaram a entender o material rapidamente.

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

Conteúdo sólido aqui. Enquanto alguns dos módulos poderiam ter sido mais detalhados, o valor geral e a aplicabilidade são altos.

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

Curso: Visual Studio Code Translated by Recurso fantástico! Os exemplos foram super claros e realmente ajudaram a solidificar os conceitos.

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

Estou tão feliz por ter tomado isso. A maneira como os conceitos foram divididos tornou-o super acessível.

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

Achei útil para uma atualização.Não tenho certeza que seria o melhor ponto de partida para um iniciante completo, tbh.

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

Conteúdo sólido e apresentado de forma clara. Eu apreciei as aplicações do mundo real mostradas.Poderia ter usado mais algumas oportunidades de prática.

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

É uma introdução decente, mas poderia se beneficiar de exemplos mais diversos e um fluxo ligeiramente melhor entre os módulos.

Escrever uma avaliação

Pediremos para fazer login após enviar — o rascunho fica salvo.

Outros também fizeram

Perguntas frequentes

O que preciso para fazer este curso? +

Só um celular ou computador com internet. Sem instalações nem hardware especial.

Como faço para pagar? +

Cartão via Stripe ou criptomoeda. Não guardamos dados do cartão — o Stripe processa com segurança.

Posso pedir reembolso? +

Sim — reembolso integral em 30 dias, sem perguntas.

Por quanto tempo terei acesso? +

Para sempre. Uma vez comprado, o curso é seu para revisar quando quiser.

Vou receber um certificado? +

Sim. Ao concluir, você recebe um certificado que pode adicionar ao seu perfil do LinkedIn.

Feito para profissionais em
Tecnologia Design Finanças Marketing Saúde Educação Hotelaria Indústria