Invoker Commands
Я уже делал обзор предложения Invokers API от OpenUI. В конце прошлой недели в блоге Chrome For Developers представили command и commandfor. Invokers API теперь называется Invoker Commands, предложение разделили на две части, первую уже готовят к релизу в Chrome. Пришло время взглянуть на это всё ещё раз.
Invoker Commands — это декларативный механизм вызова команд у указанного элемента при нажатии кнопки. Сейчас для этого нужно написать обработчик, найти целевой элемент и вызывать нужный метод. Предлагается способ делать это в HTML двумя атрибутами: command (ранее invokeraction) и commandfor (ранее invokertarget). Первый принимает название команды, второй — id элемента, у которого нужно вызвать команду.
Open Dialog
Hello world
Close
show-modal и close — это встроенные команды. Если comandfor ссылается на , то они соответствуют вызовам методов showModal() и close(). Команды toggle-popover, hide-popover и show-popover соответствуют методам togglePopover(), hidePopover() и showPopover() у элемента с атрибутом popover. Новые атрибуты работают аналогично существующим атрибутам popovertarget и popovertargetaction из Popover API. Планируется, что новые атрибуты со временем заменят их.
В предложении OpenUI было больше встроенных команд. Принято решение разделить предложение на две части и внедрять его постепенно. В первую часть попали команды для работы с и popover. Над второй частью ещё работают, но стоит ожидать команд для переключения , раскрытия системных пикеров у и , управления воспроизведением и , копирования текста, переключения полноэкранного режима и так далее.
В рамках первой части также будут реализованы пользовательские команды. Используя синтаксис именования пользовательских свойств CSS можно объявлять собственные команды и реагировать на них через JS. При нажатии кнопки на целевом элементе возникает событие command, а в объекте события можно обратиться к свойству command, в котором будет имя команды.
Сделать что-то
const custom = document.querySelector('#custom')
custom.addEventListener('command', (event) => {
if (event.command === '--do-something') {
// ...
}
});
Внешний commandfor не найдёт целевой элемент внутри Shadow DOM так же, как “не видит” элемент с нужным id внутри Shadow DOM. В будущем эти проблемы будут решены за счёт предложения Reference Target. А пока можно напрямую указать целевой элемент, используя свойство commandForElement.
Show popover
class MyElement extends HTMLElement {
connectedCallback() {
const popover = this.querySelector('[popover]');
const button = this.shadowRoot.querySelector('button');
button.commandForElement = popover;
}
}
customElements.define('my-element', MyElement);
Invoker Commands вот-вот должны появиться в Chrome. Другие браузеры смотрят на предложение позитивно и тоже займутся внедрением. Затем стоит ожидать дальнейшего развития и добавления новых команд.
#html #web_api
Я уже делал обзор предложения Invokers API от OpenUI. В конце прошлой недели в блоге Chrome For Developers представили command и commandfor. Invokers API теперь называется Invoker Commands, предложение разделили на две части, первую уже готовят к релизу в Chrome. Пришло время взглянуть на это всё ещё раз.
Invoker Commands — это декларативный механизм вызова команд у указанного элемента при нажатии кнопки. Сейчас для этого нужно написать обработчик, найти целевой элемент и вызывать нужный метод. Предлагается способ делать это в HTML двумя атрибутами: command (ранее invokeraction) и commandfor (ранее invokertarget). Первый принимает название команды, второй — id элемента, у которого нужно вызвать команду.
Open Dialog
Hello world
Close
show-modal и close — это встроенные команды. Если comandfor ссылается на , то они соответствуют вызовам методов showModal() и close(). Команды toggle-popover, hide-popover и show-popover соответствуют методам togglePopover(), hidePopover() и showPopover() у элемента с атрибутом popover. Новые атрибуты работают аналогично существующим атрибутам popovertarget и popovertargetaction из Popover API. Планируется, что новые атрибуты со временем заменят их.
В предложении OpenUI было больше встроенных команд. Принято решение разделить предложение на две части и внедрять его постепенно. В первую часть попали команды для работы с и popover. Над второй частью ещё работают, но стоит ожидать команд для переключения , раскрытия системных пикеров у и , управления воспроизведением и , копирования текста, переключения полноэкранного режима и так далее.
В рамках первой части также будут реализованы пользовательские команды. Используя синтаксис именования пользовательских свойств CSS можно объявлять собственные команды и реагировать на них через JS. При нажатии кнопки на целевом элементе возникает событие command, а в объекте события можно обратиться к свойству command, в котором будет имя команды.
Сделать что-то
const custom = document.querySelector('#custom')
custom.addEventListener('command', (event) => {
if (event.command === '--do-something') {
// ...
}
});
Внешний commandfor не найдёт целевой элемент внутри Shadow DOM так же, как “не видит” элемент с нужным id внутри Shadow DOM. В будущем эти проблемы будут решены за счёт предложения Reference Target. А пока можно напрямую указать целевой элемент, используя свойство commandForElement.
Show popover
class MyElement extends HTMLElement {
connectedCallback() {
const popover = this.querySelector('[popover]');
const button = this.shadowRoot.querySelector('button');
button.commandForElement = popover;
}
}
customElements.define('my-element', MyElement);
Invoker Commands вот-вот должны появиться в Chrome. Другие браузеры смотрят на предложение позитивно и тоже займутся внедрением. Затем стоит ожидать дальнейшего развития и добавления новых команд.
#html #web_api