Web Components

Три технології

• Custom Elements — реєстрація власного тегу: <my-button>
• Shadow DOM — ізольоване дерево DOM зі своїми стилями, що не витікають назовні
• HTML Templates — <template> та <slot> для вмісту

Приклад

class MyCard extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      
      

    `;
  }
}
customElements.define('my-card', MyCard);

// Використання в HTML:
// Контент тут

Web Components vs React/Vue

Web Components — нативний стандарт, без залежностей. React/Vue — бібліотеки з кращим DX і екосистемою. Можна комбінувати: Lit (Google) спрощує написання Web Components.