Invoker Commands (command / commandfor)

Assim como popovertarget permite que um botão controle um popover sem JavaScript, os novos atributos command e commandfor generalizam essa ideia: um elemento pode controlar praticamente qualquer outro (abrir um dialog, fechar um popover, remover um elemento) de forma totalmente declarativa.

O jeito antigo

<dialog id="modal">...</dialog>
<button id="abrir">Abrir</button>

document.getElementById('abrir').addEventListener('click', () => {
    document.getElementById('modal').showModal();
});

Uma ação simples como "abrir esse dialog" sempre exigia um script separado, mesmo sendo um comportamento genérico e repetido em praticamente todo projeto.

Como funcionam command e commandfor

commandfor aponta para o id do elemento alvo, e command diz qual ação executar:

<dialog id="modal">
    Conteúdo do modal
</dialog>

<button command="show-modal" commandfor="modal">Abrir</button>

Nenhuma linha de JavaScript foi escrita — o navegador já sabe abrir o <dialog> a partir do comando.

Fechando o dialog

<dialog id="modal">
    Conteúdo do modal
    <button command="close" commandfor="modal">Fechar</button>
</dialog>

Controlando um popover

<button command="toggle-popover" commandfor="menu">Menu</button>

<div id="menu" popover>Conteúdo do menu</div>

Os comandos show-popover, hide-popover e toggle-popover cobrem os mesmos casos de popovertarget, mas com uma sintaxe que funciona para outros tipos de elemento também.

Comandos customizados

Para uma ação que o navegador não conhece nativamente, é só prefixar o valor com -- e escutar o evento command em JavaScript:

<button command="--favoritar" commandfor="produto-42">Favoritar</button>
<div id="produto-42">Produto 42</div>

document.getElementById('produto-42').addEventListener('command', (e) => {
    if (e.command === '--favoritar') {
        e.target.classList.toggle('favoritado');
    }
});

Isso permite reaproveitar a mesma estrutura declarativa (command/commandfor) mesmo para lógicas próprias da aplicação, mantendo a intenção clara direto no HTML.

Quando usar

• Abrir e fechar <dialog> e popovers sem escrever listeners repetitivos.
• Deixar a intenção de cada botão explícita no próprio HTML, facilitando a leitura do código.
• Comandos customizados para ações específicas da aplicação, mantendo o mesmo padrão declarativo.

Compatibilidade

Essa é uma funcionalidade bem recente e ainda em expansão entre navegadores. Vale sempre checar o suporte antes de usar em produção, principalmente se o projeto precisar suportar navegadores mais antigos.

caniuse

Conclusão

Os atributos command e commandfor continuam a tendência de trazer pro HTML puro interações que antes exigiam JavaScript, deixando o código mais declarativo e reduzindo a quantidade de listeners repetidos entre projetos.