Веб-компоненты: Shadow DOM и Custom Elements

Фреймворки приходят и уходят, а стандарт браузера остаётся. Веб-компоненты дают изолированные переиспользуемые элементы на чистом JavaScript — без установки реакта.

Shadow DOM

Тень создаёт изолированное дерево: внутренние стили не вытекают наружу и внешние его не ломают.

const host = document.createElement("div");
host.attachShadow({ mode: "open" });
host.shadowRoot.innerHTML = `
  <style>.box { padding: 8px; background: #eef; }</style>
  <div class="box">Привет из тени</div>`;
document.body.append(host);

Custom Elements

Свой тег через класс и customElements.define() — со своими атрибутами и жизненным циклом.

class QkCheck extends HTMLElement {
  connectedCallback() { this.innerHTML = "✓ проверено"; }
}
customElements.define("qk-check", QkCheck);