Os componentes são os blocos de construção de aplicativos da Web modernos. Quais práticas recomendadas você deve seguir ao criar seus próprios componentes para que eles resistam ao teste do tempo?
Os componentes são os blocos de construção de aplicativos da Web modernos. Quais
práticas recomendadas você precisa seguir ao criar seus próprios componentes para que eles resistam
ao teste do tempo?
Elementos personalizados
Com os elementos personalizados, os desenvolvedores podem estender o HTML e criar as próprias tags. Como os elementos personalizados são baseados em padrões, eles se beneficiam do modelo de componentes integrados da Web. O resultado é um código mais modular que pode ser reutilizado em muitos contextos diferentes.
Saiba mais
Shadow DOM
O Shadow DOM é um padrão da Web que oferece estilo de componentes e encapsulamento de
marcação. É uma parte crítica da história do Web Components, porque garante que um componente funcionará em qualquer ambiente, mesmo que outro CSS ou JavaScript esteja em ação na página.
Saiba mais
Práticas recomendadas
Como elementos personalizados e o shadow DOM são primitivos de baixo nível, nem sempre está claro a melhor forma de combiná-los para criar um componente robusto e que funcione bem em muitos ambientes diferentes. Embora você realmente possa fazer
tudo com essas APIs, veja algumas práticas recomendadas para garantir
que seus componentes funcionem bem em qualquer lugar.
Saiba mais
Exemplos
HowTo-Components são um conjunto de elementos que demonstram as práticas recomendadas para elementos personalizados e Shadow DOM. Esses elementos não se destinam ao uso
na produção, mas são apresentados como um material de ensino para ajudar a mapear
as sugestões de práticas recomendadas para implementações reais.
Saiba mais
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2017-08-14 UTC."],[],[]]