Post

Two cool improvements are coming to <dialog> soon ™️. - button command/commandfor attributes to open dialogs without JS. - closedby attribute to enable light dismiss or disable close on esc (etc)

Cory LaViska

@cory.laviska.com

17 Nov 2024

Is there a shortcut? I’m currently using data-dialog=“open id” and it would be more ergonomic to continue using one attribute. command=“open:id” or similar would be great.

Luke

@lukewarlow.dev

That was discussed as one idea, unfortunately it gets syntactically tricky. If you set .commandForElement to an element without an ID then it sets the attribute to an empty string. So you'd have to have a way to deal with that. It'd also be a novel syntax to parse, so we decided against it.

17/11/24, 3:09 pm0 reposts1 like

Cory LaViska

@cory.laviska.com

17 Nov 2024

*grumbles incoherently in HTML*

Luke

@lukewarlow.dev

17 Nov 2024

I'm not 100% on what we've ended up with either, naming and explicitness wise but I'm trying to not let perfect be the enemy of good.

Cory LaViska

@cory.laviska.com

17 Nov 2024

are command and commandfor pretty solid or still subject to change? I see they’ve made it to MDN already. developer.mozilla.org/en-US/docs/W...

developer.mozilla.orgInvoker Commands API - Web APIs | MDNThe Invoker Commands API provides a way to declaratively assign behaviors to buttons, allowing control of interactive elements when the button is enacted (clicked or invoked via a keypress, such as th...

Luke

@lukewarlow.dev

17 Nov 2024

I would say they're pretty solid it's mostly editorial stuff on the spec PR left, along with some accessibility work. I believe both WebKit and Mozilla have marked themselves as supportive and the chrome team definitely are.