Invoker Commands

Я уже делал обзор предложения Invokers API от OpenUI. В конце прошлой недели в блоге Chrome For Developers представили command и commandfor. Invokers API теперь называется Invoker Commands, предложение разделили на две части, первую уже готовят к релизу в Chrome. Пришло время взглянуть на это всё ещё раз.

Invoker Commands — это декларативный механизм вызова команд у указанного элемента при нажатии кнопки. Сейчас для этого нужно написать обработчик, найти целевой элемент и вызывать нужный метод. Предлагается способ делать это в HTML двумя атрибутами: command (ранее invokeraction) и commandfor (ранее invokertarget). Первый принимает название команды, второй — id элемента, у которого нужно вызвать команду.

<button
  type="button"
  commandfor="hello-dialog"
  command="show-modal"
>
  Open Dialog
</button>

<dialog id="hello-dialog">
  Hello world

  <button 
    type="button" 
    commandfor="dialog" 
    command="close"
  >
    Close
  </button>
</dialog>

show-modal и close — это встроенные команды. Если comandfor ссылается на <dialog>, то они соответствуют вызовам методов showModal() и close(). Команды toggle-popover, hide-popover и show-popover соответствуют методам togglePopover(), hidePopover() и showPopover() у элемента с атрибутом popover. Новые атрибуты работают аналогично существующим атрибутам popovertarget и popovertargetaction из Popover API. Планируется, что новые атрибуты со временем заменят их.

В предложении OpenUI было больше встроенных команд. Принято решение разделить предложение на две части и внедрять его постепенно. В первую часть попали команды для работы с <dialog> и popover. Над второй частью ещё работают, но стоит ожидать команд для переключения <details>, раскрытия системных пикеров у <input> и <select>, управления воспроизведением <audio> и <video>, копирования текста, переключения полноэкранного режима и так далее.

В рамках первой части также будут реализованы пользовательские команды. Используя синтаксис именования пользовательских свойств CSS можно объявлять собственные команды и реагировать на них через JS. При нажатии кнопки на целевом элементе возникает событие command, а в объекте события можно обратиться к свойству command, в котором будет имя команды.

<button
  type="button"
  commandfor="custom"
  command="--do-something"
>
  Do something
</button>

<div id="custom"></div>

<script>
  const custom = document.querySelector('#custom');
  custom.addEventListener('command', (event) => {
    if (event.command === '--do-something') {
      // ...
    }
  });
</script>

Внешний commandfor не найдёт целевой элемент внутри Shadow DOM так же, как <label for> “не видит” элемент с нужным id внутри Shadow DOM. В будущем эти проблемы будут решены за счёт предложения Reference Target. А пока можно напрямую указать целевой элемент, используя свойство commandForElement.

<my-element>
  <template shadowrootmode="open">
    <button 
      type="button"
      command="show-popover"
    >
      Show popover
    </button>
    <slot></slot>
  </template>

  <div popover></div>
</my-element>

<script>
  class MyElement extends HTMLElement {
    connectedCallback() {
      const popover = this.querySelector('[popover]');
      const button = this.shadowRoot.querySelector('button');
      button.commandForElement = popover;
    }
  }

  customElements.define('my-element', MyElement);
</script>

Invoker Commands вот-вот должны появиться в Chrome. Другие браузеры смотрят на предложение позитивно и тоже займутся внедрением. Затем стоит ожидать дальнейшего развития и добавления новых команд.

#html #web_api