Web Components permitem reutilizar código HTML, CSS e JavaScript através de componentes customizados que encapsulam suas funcionalidades. São compostos por templates, elementos customizados, Shadow DOM e imports, permitindo isolar e empacotar funcionalidades reutilizáveis de forma independente no DOM.
3. O que é?
O conceito de Web Components é bem simples, basta imaginar que
tenhamos que reaproveitar um conjunto de camadas como
Controller e View em algum momento na nossa aplicação e ao invés
de duplicarmos as mesmas, as agrupamos em um Component para
possamos reutilizá-lo quando quisermos.
5. Templates
De nem pedaços de código(HTML) que são totalmente inertes à
página até que seu Javascript os ative, ou seja, o template não
existirá na página até que você necessite.
9. Shadow DOM
É onde uma parte do código do seu elemento é encapsulada e
escondida pelo browser, ou seja, não é visível no código normal do
DOM, mas que monta todo seu componente “por baixo dos panos”.
10. Imports
Uma vez tendo um trecho de DOM isolado, com estilos e
comportamentos independentes de outros componentes, agora
precisamos empacotar isso. E para isso servem esses imports que
declara os arquivos e dependências do componente para que eles
possam ser lidos posteriormente.