Реализация пользовательских атрибутов

Под конец прошлого года я рассказывал об API пользовательских атрибутов, который предложен на замену отклонённых Apple настраиваемых встроенных элементов (Customized Built-In Elements). Это часть API веб-компонентов.

В Chrome и Firefox можно описать такой пользовательский элемент, который будет наследоваться от встроенного элемента, например кнопки, заголовка или абзаца. С помощью атрибута is пользовательский элемент связывается со встроенным.

Это позволяет сохранять поведение и семантику встроенных элементов HTML, но расширять их возможности и добавлять новое поведение. Apple категорически от этого отказались и Safari никогда не будет поддерживать эту возможность.

Пользовательских атрибуты предложены как альтернатива. На днях Кит Сиркель представил полифил пользовательских атрибутов, дополнив тем, что хотел бы видеть это в браузерах. А это значит, что скоро мы увидим прототип в Firefox.

Пользовательские атрибуты похожи на пользовательские элементы способом описания, регистрацией и жизненным циклом. Но с атрибутами можно расширять существующие элементы не вводя новые. Идея похожа на атрибут is.

Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться

В примере к полифилу приводится атрибут persist-value, который вешает слушатель события input и записывает значение элемента в LocalStorage. В роли ключа используется значение атрибута. Такой атрибут применим к разным полям ввода.

class PersistValue extends Attr {
  connectedCallback() {
    const stored = localStorage.getItem(
      this.value
    );
    if (stored !== null) {
      this.ownerElement.value = stored;
    }
    this
      .ownerElement
      .addEventListener(
        "input",
        this
      );
  }

  disconnectedCallback() {
    this
      .ownerElement
      .removeEventListener(
        "input",
        this
      );
  }

  attributeChangedCallback(oldValue, newValue) {
    if (oldValue !== null) {
      localStorage.removeItem(oldValue);
    }
  }

  handleEvent() {
    localStorage.setItem(
      this.value,
      this.ownerElement.value
    );
  }
}

customAttributes.define(
  "persist-value",
  PersistValue
);

Использование в HTML:

<input
  name="email"
  persist-value="email-draft" 
>
<textarea
  name="bio"
  persist-value="bio-draft"
>
</textarea>

Такой API выглядит интереснее, чем is как минимум по двум причинам. Первая: у одного элемента можно указать сразу несколько разных атрибутов. В is можно указать только имя одного конкретного пользовательского элемента.

Вторая: один атрибут можно применить к разным элементам из-за наследования от Attr. В is можно указать имя только того пользовательского элемента, который наследуется от соответствующего типа встроенного элемента.

Пользовательские атрибуты дадут авторам HTML-first библиотек более удобный способ связывания атрибутов с элементами и возможность реагирования на события жизненного цикла. Кроме того, это способ расширять стандартные элементы.

Вместе с полифилом есть ссылка на эксплейнер, в котором подробнее описан предлагаемый API. Также есть страницы с описанием мотивации и дизайна API. Я заинтересован и буду ждать появления прототипа в Firefox.

#html #js #web_api