Clever Geek Handbook

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



写真： NeONBRAND







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







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







Webコンポーネントとは



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









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);


, - .









, - . , :









, - :









. .







More articles:


All Articles