Re: [w3ctag/design-reviews] Invokers API (Issue #920)

lukewarlow left a comment (w3ctag/design-reviews#920)

Firstly I'd like to say thank you for taking the time to review this proposal and I want to apologise for the time it’s taken to respond, please don’t take this as a sign we don’t value the feedback.


> We feel it makes sense to have an invoke(action, invoker) method because it lays a path for future interactions with elements. We think that this might be more useful for custom elements or future features that are added to the platform.

Regarding the suggestion for an invoke() function, this was [discussed](https://github.com/openui/open-ui/issues/1069) we don’t believe this is needed at this time.
Custom elements can have their custom commands dispatched via calling dispatchEvent with the appropriate command event instantiated, see code snippet below.
Built-in actions will have an existing JavaScript function to achieve the same thing. Specifically in the case of popover these were recently updated to support supplying the invoker
this allows the imperative APIs to support the various benefits of the declarative approach.

```js
const customElement = document.querySelector(‘custom-element’);
const source = document.querySelector(‘#source’);
const commandEvent = new CommandEvent('command', {source: source, command: '--custom-action'});
customElement.dispatchEvent(commandEvent);
```

> We think that this would be more useful if it were possible to get the list of available actions from elements.


This was also [discussed](https://github.com/openui/open-ui/issues/1068), we see that this would be usable but not necessary for v1. For v1 all browsers will ship the same set of commands so it’s not needed for feature detection. It’s worth also pointing out that you can do some level of feature detection using the command IDL attributes reflection, it only reflects valid or custom values, this should solve most of the use cases.

If we were to add something like this in future it would be good to hear from the TAG what API shape you would like to see. Should this be an isValidCommand(command) function, or should this be a method that returns an array of values? How contextual do you think the validation should be? e.g. Should toggle-popover be valid on a `<div>` when it doesn’t have a popover attribute?

```js
const button = document.createElement('button');
button.command = 'invalid-command-to-validate';
button.command === ''
button.command = 'close';
button.command === 'close';
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/920#issuecomment-2657343639
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/920/2657343639@github.com>