Komponen Web di Dunia Nyata

_{Foto oleh NeONBRAND}

Komponen web adalah nama umum untuk serangkaian teknologi yang dirancang untuk membantu pengembang web membuat blok yang dapat digunakan kembali. Pendekatan berbasis komponen untuk membuat antarmuka sudah mapan dalam kerangka front-end, dan sepertinya ide bagus untuk mengintegrasikan fungsi ini secara native ke dalam browser. Dukungan untuk teknologi ini oleh browser telah mencapai tingkat yang cukup sehingga Anda dapat dengan serius berpikir untuk menggunakan teknologi ini untuk proyek kerja Anda.

Pada artikel ini, kita akan melihat fitur-fitur menggunakan komponen web, yang karena beberapa alasan para penginjil teknologi ini tidak membicarakannya.

Apa komponen web itu?

Pertama, Anda perlu memutuskan apa sebenarnya yang termasuk dalam konsep komponen web. Deskripsi teknologi yang baik ada di MDN. Jika sangat singkat, maka biasanya dalam konsep ini termasuk fitur-fitur berikut:

• Elemen khusus - kemampuan untuk mendaftarkan tag html Anda dengan perilaku tertentu
• Shadow DOM - Buat Konteks Terpencil CSS
• Slots - kemampuan untuk menggabungkan konten html eksternal dengan komponen html internal

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 - , - .
• - . , .

. .