वास्तविक दुनिया में वेब घटक

_{नियोनब्रैंड द्वारा फोटो}

वेब डेवलपर्स पुन: प्रयोज्य ब्लॉक बनाने में मदद करने के लिए डिज़ाइन की गई तकनीकों के एक सेट के लिए वेब घटक एक सामान्य नाम है। इंटरफेस बनाने के लिए घटक-आधारित दृष्टिकोण फ्रंट-एंड फ्रेमवर्क में अच्छी तरह से स्थापित है, और यह इस कार्यक्षमता को ब्राउज़रों में मूल रूप से एकीकृत करने के लिए एक अच्छा विचार जैसा लगता है। ब्राउज़रों द्वारा इस तकनीक के लिए समर्थन पहले से ही पर्याप्त स्तर पर पहुंच गया है ताकि आप अपने कार्य परियोजनाओं के लिए इस तकनीक का उपयोग करने के बारे में गंभीरता से सोच सकें।

इस लेख में, हम वेब घटकों का उपयोग करने की विशेषताओं को देखेंगे, जो किसी कारण से इन प्रौद्योगिकियों के प्रचारकों के बारे में बात नहीं करते हैं।

वेब घटक क्या हैं

पहले आपको यह तय करने की आवश्यकता है कि वेब घटकों की अवधारणा में वास्तव में क्या शामिल है। तकनीक का एक अच्छा वर्णन एमडीएन पर है। यदि बहुत संक्षेप में, तो आमतौर पर इस अवधारणा में निम्नलिखित विशेषताएं शामिल हैं:

• कस्टम तत्व - विशिष्ट व्यवहार के साथ अपने HTML टैग को पंजीकृत करने की क्षमता
• शैडो डोम - सीएसएस पृथक संदर्भ बनाएँ
• स्लॉट्स - आंतरिक 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 - , - .
• - . , .

. .