Componentes da Web no mundo real

_{Foto de NeONBRAND}

Componentes da Web é o nome comum para um conjunto de tecnologias projetadas para ajudar os desenvolvedores da Web a criar blocos reutilizáveis. A abordagem baseada em componentes para criar interfaces está bem estabelecida nas estruturas de front-end e parece uma boa ideia integrar essa funcionalidade nativamente nos navegadores. O suporte a essa tecnologia pelos navegadores já atingiu um nível suficiente para que você possa pensar seriamente em usar essa tecnologia para seus projetos de trabalho.

Neste artigo, examinaremos os recursos do uso de componentes da Web, dos quais, por algum motivo, os evangelistas dessas tecnologias não falam.

O que são componentes da web

Primeiro, você precisa decidir o que exatamente está incluído no conceito de componentes da web. Uma boa descrição da tecnologia está no MDN. Se for muito breve, geralmente nesse conceito incluem os seguintes recursos:

• Elementos personalizados - a capacidade de registrar suas tags html com comportamento específico
• DOM da sombra - criar contexto isolado CSS
• Slots - a capacidade de combinar conteúdo html externo com o componente html interno

hello-world , :

// -     html-
class HelloWorld extends HTMLElement {
  constructor() {
    super();
    //  Shadow DOM
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    const name = this.getAttribute("name");
    //     Shadow DOM
    this.shadowRoot.innerHTML = `Hello, <strong>${name}</strong> :)`;
  }
}

//     html-
window.customElements.define("hello-world", HelloWorld);

, , <hello-world name="%username%"></hello-world>, . !

.

, - , . , . html- Vue React , , . DOM – , html, DOM–, . , .

, , - Shadow DOM. , – ! , , ..

, -, , lit-element. -, lit-html DOM , . , API.

- Javascript. lit-element, - 6 , preact, , React, 2 , 3 . , - .

Shadow DOM

html- CSS, . Shadow DOM. CSS. , , . , - , , Shadow DOM. Shadow DOM this.attachShadow(), Shadow DOM , <style></style> <link rel="stylesheet">.

, CSS, . , . Shadow DOM 30, Shadow DOM 50. , , - <my-list items="myItems"> <my-item item="item">.

, , CSS-, , , CSS.

- customElements.define. , , - my-button, . , , , , , , . , , CSS-, -.

Tree-shaking

– . , React

import { Button } from "./button";

//...

render() {
  return <Button>Click me!</Button>
}

Button. , . - , html-, . lit-element :

import '@polymer/paper-button/paper-button.js';

// ...

render() {
  return html`<paper-button>Click me!</paper-button>`;
}

. , - , . , - .

tree-shaking , . , , , :

import { Button, Icon } from './components';

//...

render() {
  return <Button>Click me!</Button>
}

Icon . - , . 2010 , jquery-.

Javascript , . , Typescript Flow. React, :

class Button extends Component<{ text: string }> {}

<Button />  // :    text
<Button text="Click me" action="test" />  // :   action

<Button text="Click me" /> //   ,  

- . , - , Typescript -. JSX.IntrinsicElements – , Typescript .

namespace JSX {
  interface IntrinsicElements {
    'paper-button': {
      raised: boolean;
      disabled: boolean;
      children: string
    }
  }
}

Typescript -, . , JSX . , querySelector. :

const component = document.querySelector('paper-button') as PaperButton;

, , Typescript -, - .

, <input> <button>, . , , , . .

//     DOM
const component = document.querySelector("users-list");

//    
component.items = myData;

, :

class UsersList extends HTMLElement {
  set items(items) {
    //  
    this.__items = items;
    //  
    this.__render();
  }
}

lit-element – property:

class UsersList extends HTMLElement {
  @property()
  users: User[];
}

, , :

const component = document.querySelector("users-list");

component.expanded = true;
component.items = myData;
component.selectedIndex = 3;

, , . , - . , . lit-element , , , - setTimeout(() => this.__render(), 0). , , :

component.items = [{ id: 1, name: "test" }];
//  ,    
// expect(component.querySelectorAll(".item")).toHaveLength(1);

await delay(); //     
expect(component.querySelectorAll(".item")).toHaveLength(1);

, - .

, - . , :

• - . Github. - open-source . , , - .
• -. , , - . CSS . iframe, - Shadow DOM, .

, - :

• UI- , tree-shaking , . UI- (, ..) , (React, Vue .) .
• - . , - <my-app /> SPA-. Javascript, - . Angular/React/Vue - , - .
• - . , .

. .