Web Components কী (কাস্টম এলিমেন্ট + শ্যাডো DOM)?

Web Components কী (কাস্টম এলিমেন্ট + শ্যাডো DOM)? – HTML · IT ইন্টারভিউ অনুশীলন

class UserCard extends HTMLElement {
  connectedCallback() {            // lifecycle: runs when added to the page
    const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
    shadow.innerHTML = `
      <style> h2 { color: blue; } </style>
      <h2>${this.getAttribute("name")}</h2>
      <slot></slot>
    `;
  }
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen

connectedCallback()    // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }

কাস্টম এলিমেন্ট সংজ্ঞায়িত করা

Shadow DOM = সত্যিকারের এনক্যাপসুলেশন

লাইফসাইকেল কলব্যাক

এটি কেন গুরুত্বপূর্ণ