O que os WebComponents tentam resolver?

Como se alimentam?

Onde vivem?

#GloboReporterFeelings

+

• Gambiarras
• Método euristico aproximativo de ajuste de inconsistências
• PoG

A idéia não é revolucionária

Quase todos os Frameworks front-end tentam criar um componente.

Então, qual o propósito?

Quando você cria um componente de um framework, ele pode ser modificado pelo CSS de outros.

Por isso esses frameworks criam um "pacotão de componentes", para você não precisar usar outro. 

Mais alguma coisa?

Além disso, existe a facilidade de implementação. Imagine:

<link 
    rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
/>
<div class="progress">
  <div 
    class="progress-bar"
    role="progressbar"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 60%;"
  >
    <span class="sr-only">60% Complete</span>
  </div>
</div>

<link 
    rel="stylesheet"
    href="https://raw.githubusercontent.com/MikeCostello/bootstrap-web-components/master/dist/bootstrap-web-components.min.js"
>
<bs-progress value="60" type="primary"></bs-progress>

Exemplo no site do Bootstrap

Exemplo do "Bootstrap WebComponents"

Então, como funciona?

Os WebComponents são formados por 5 especificações, não apenas uma.

• Templates: definem pedaços de código que são totalmente inertes à página até que seu Javascript os ative.
• Decorators: aplicam os templates baseando-se em seletores para criar mudanças visuais ricas e comportamentos.
• Custom Elements: são elementos customizados, com nomes e scripts criados por você.
• 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”.
• Imports: definem quais elementos customizados são empacotados e lidos como um recurso.

Templates

Os WebComponents são formados por 5 especificações, não apenas uma.

• Templates: definem pedaços de código que são totalmente inertes à página até que seu Javascript os ative.
• Decorators: aplicam os templates baseando-se em seletores para criar mudanças visuais ricas e comportamentos.
• Custom Elements: são elementos customizados, com nomes e scripts criados por você.
• 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”.
• Imports: definem quais elementos customizados são empacotados e lidos como um recurso.