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.