Componentes da Web no mundo real (Parte 2)

Mais de um ano se passou desde minha publicação "Web Components in the Real World" e eu acumulei novas observações sobre o que ainda está errado com essa tecnologia. Talvez esses pontos permitam que alguém evite um beco sem saída para seus projetos.

_{Foto de Brandon Molitwenik no Unsplash}

HTML quebrado

HTML tem muitos recursos úteis que permitem implementar funcionalidades sem usar JavaScript. Um desses recursos é a capacidade de enviar um formulário pressionando a tecla Enter em qualquer campo de entrada. Aqui está um exemplo:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <button>Send!</button>
</form>

Entramos no texto, pressionamos Enter, os dados são enviados para o servidor, sem JavaScript. Se desejar, você pode evitar recarregar a página e enviar dados via AJAX, mas neste caso a quantidade de JS será mínima.

Agora, vamos tentar substituir um botão normal por um componente da web:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <my-button>Send!</my-button>
</form>

O componente web my-buttoncontém o mesmo botão dentro de si, sem diferenças visuais. Mas enviar o formulário pressionando Enter quebrou! Aqui está uma demonstração , você pode ver por si mesmo.

? -, . , . , : Javascript, , -. , - 8 , production-ready.

, -. HTML , label. , , . -! :

<label>First name: <input type="text"></label>
<label>Last name: <my-input></label>

, input "First name", "Last name" - . ! 2 , . – label input . , ? , - -, - ( , ShadowDOM).

CSP

" , ". CSP – , . CSP <style></style> , <link rel="stylesheet"> (, style- , 'unsafe-inline', , ).

-? , ShadowDOM , , ShadowDOM style-, CSP. - : Stencil () LitElement ().

– Constructable Stylesheets API, ShadowDOM unsafe-inline. – CSP, -.

Lifecycle-

, . , ( material-web-components):

<my-menu>
    <my-menu-item />
    <my-menu-item />
</my-menu>

- . connectedCallback. - DOM . , . :

class MyMenu extends HTMLElement {
    connectedCallback() {
        console.log('my menu')
    }
}

class MyMenuItem extends HTMLElement {
    connectedCallback() {
        console.log('my menu item')
    }
}

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

, :

"my menu"
"my menu item"
"my menu item"

connectedCallback , . , . , :

"my menu item"
"my menu item"
"my menu"

? my-menu ? HTML ,

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

// 
customElements.define('my-menu-item', MyMenuItem)
customElements.define('my-menu', MyMenu)

, connectedCallback. , , . " " , window.setTimeout . " " , . -

O componente da web não será capaz de interromper a renderização das partes internas do spoiler. Quando o componente for ativado, as imagens internas já começarão a carregar e consumir seu tráfego, mesmo que você não queira abrir este spoiler.

conclusões

Existem dados espalhados por todos os componentes da web, bem polvilhados com o marketing do Google. Ainda existem muitas questões não resolvidas no padrão que podem se provar um obstáculo intransponível para seus projetos. Seria útil saber com antecedência sobre as armadilhas potenciais para tomar uma decisão mais informada se usar componentes da web e estruturas com base neles ou ficar com a abordagem simples e antiga de HTML / JS / CSS. Espero que este artigo tenha sido útil, obrigado pela leitura!