Реализация пользовательских атрибутов
Под конец прошлого года я рассказывал об 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:
Такой API выглядит интереснее, чем is как минимум по двум причинам. Первая: у одного элемента можно указать сразу несколько разных атрибутов. В is можно указать только имя одного конкретного пользовательского элемента.
Вторая: один атрибут можно применить к разным элементам из-за наследования от Attr. В is можно указать имя только того пользовательского элемента, который наследуется от соответствующего типа встроенного элемента.
Пользовательские атрибуты дадут авторам HTML-first библиотек более удобный способ связывания атрибутов с элементами и возможность реагирования на события жизненного цикла. Кроме того, это способ расширять стандартные элементы.
Вместе с полифилом есть ссылка на эксплейнер, в котором подробнее описан предлагаемый API. Также есть страницы с описанием мотивации и дизайна API. Я заинтересован и буду ждать появления прототипа в Firefox.
#html #js #web_api
Под конец прошлого года я рассказывал об 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:
Такой API выглядит интереснее, чем is как минимум по двум причинам. Первая: у одного элемента можно указать сразу несколько разных атрибутов. В is можно указать только имя одного конкретного пользовательского элемента.
Вторая: один атрибут можно применить к разным элементам из-за наследования от Attr. В is можно указать имя только того пользовательского элемента, который наследуется от соответствующего типа встроенного элемента.
Пользовательские атрибуты дадут авторам HTML-first библиотек более удобный способ связывания атрибутов с элементами и возможность реагирования на события жизненного цикла. Кроме того, это способ расширять стандартные элементы.
Вместе с полифилом есть ссылка на эксплейнер, в котором подробнее описан предлагаемый API. Также есть страницы с описанием мотивации и дизайна API. Я заинтересован и буду ждать появления прототипа в Firefox.
#html #js #web_api