Чим відрізняються веб-компоненти та користувацькі елементи?

"Веб-компоненти" та "Спеціальні елементи" часто змішуються, а веб-пошуки назви цього питання ще не дають великої чіткості. Давайте виправимо це.

Спеціальні елементи є частиною специфікації стандарту Web Components , поряд із імпортом Shadow DOM, Templates та HTML.

З специфікації:

Спеціальні елементи - це спосіб авторам створити власні повнофункціональні елементи DOM. Хоча автори завжди могли використовувати нестандартні елементи у своїх документах, із специфічною для додатків поведінкою, доданою після факту за допомогою сценарію чи подібного, такі елементи історично були невідповідними та не дуже функціональними. Визначаючи нестандартний елемент, автори можуть повідомити аналізатору, як правильно сконструювати елемент та як елементи цього класу повинні реагувати на зміни.

Історія

Зараз специфікація знаходиться на v1 . Попередня версія, у0, була підтримана , так як Chrome 33 , і мала різний API, використовуючи document.registerElement- який є в даний час НЕ рекомендується .

Використання

Спеціальні елементи можуть бути автономними (створення нового елемента з нуля (тобто розширення HTMLElement )), або можуть налаштувати наявний HTML-елемент (наприклад, HTMLButtonElement).

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

Другий параметр customElements.define()виклику - це ім'я класу, що реалізує поведінку елемента. Дивіться приклади в специфікації для автономних елементів та для індивідуальних вбудованих елементів .

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

Спеціальні елементи підтримуються в оригінальних веб-переглядачах і можуть бути заповнені для старих браузерів, які переходять до Safari 7+ та IE11. Дивіться також поліфункцію v1 .

Шаблони та тінь DOM

Використовуючи шаблони та тінь DOM в користувацькому елементі, ви можете зробити елемент простішим в обробці та повторному використанні.

Шаблони дозволяють використовувати HTML для оголошення структури користувацьких елементів:

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

Shadow DOM дозволяє стилі, ідентифікатори та класи вмісту можна привласнювати до себе. Це перешкоджає кровотечі CSS або доступу до внутрішніх приміщень користувацького елемента поза його межами.

customElements.define('fancy-element', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#fancy-element-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
  ...
});

Вивчайте більше

Статті для розробників Google :

• Спеціальні елементи v1: веб-компоненти для багаторазового використання
• Shadow DOM: автономні веб-компоненти