Composants Web dans le monde réel

_{Photo de NeONBRAND}

Les composants Web sont le nom commun d'un ensemble de technologies conçues pour aider les développeurs Web à créer des blocs réutilisables. L'approche basée sur les composants pour créer des interfaces est bien établie dans les frameworks frontaux, et il semble être une bonne idée d'intégrer cette fonctionnalité de manière native dans les navigateurs. La prise en charge de cette technologie par les navigateurs a déjà atteint un niveau suffisant pour que vous puissiez sérieusement penser à utiliser cette technologie pour vos projets de travail.

Dans cet article, nous examinerons les caractéristiques de l'utilisation des composants Web, dont les évangélistes de ces technologies ne parlent pas pour une raison quelconque.

Quels sont les composants Web

Vous devez d'abord décider ce qui est exactement inclus dans le concept de composants Web. Une bonne description de la technologie se trouve sur MDN. Si très brièvement, alors généralement dans ce concept comprennent les fonctionnalités suivantes:

• Éléments personnalisés - la possibilité d'enregistrer vos balises html avec un comportement spécifique
• DOM fantôme - Créer un contexte isolé CSS
• Slots - la possibilité de combiner le contenu html externe avec le composant html interne

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

. .