実世界のWebコンポーネント

_{写真： NeONBRAND}

Webコンポーネントは、Web開発者が再利用可能なブロックを作成するのに役立つように設計された一連のテクノロジの共通名です。 インターフェイスを作成するためのコンポーネントアプローチは、フロントエンドフレームワークで十分に確立されており、この機能をブラウザにネイティブに統合することをお勧めします。 ブラウザーによるこのテクノロジーのサポートはすでに十分なレベルに達しており、作業プロジェクトでこのテクノロジーを使用することを真剣に考えることができます。

この記事では、Webコンポーネントを使用する機能について説明しますが、何らかの理由でこれらの技術の伝道者は語っていません。

Webコンポーネントとは

最初に、Webコンポーネントの概念に何を正確に含めるかを決定する必要があります。 テクノロジーの適切な説明は MDNにあります。 つまり、通常、次の機能がこの概念に含まれています。

• カスタム要素 -特定の動作でhtmlタグを登録する機能
• Shadow DOM -CSS分離コンテキストの作成
• スロット -外部htmlコンテンツと内部htmlコンポーネントを組み合わせる機能

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

. .