About the commandfor attribute.

#webdev #javascript #beginners #learning

What I want to share here is my experiences with the commandfor attribute.

Short intro:

I'm using it in my moduleEditor, where I'm working on.
This is a fully OOP based package and this means that all the HTML elements are programmatically created and directly appended to the DOM.

Note:

The development itself I do on my localhost and when the time is right I push an updated version to GitHub.

At present:

I'm working on the development of my 'ol/ul/li' module and as this elements have a lot of options to be implemented.
I'm working on a popupable toolbox to cater that.

For this I'm making use of the commandfor/command and popover attributes and the command event.
(This attributes here are passed to button elements and a target element.)

Explanation:

For the creation of those buttons, I'm using a predefined function and in this function I have this rule:

create_elem.commandForElement = command_for;

This function I use within another function and this function contains this rule and creates another element.

const toolbox_ctn = await SEE.toolboxCtnElem(toolbox_ctn_data);

Here is what I experienced with the 'commandfor' attribute.

First I passed 'elem_id' to the create_elem.commandForElement rule, this gave an error, then I tried 'toolbox_ctn.id' and same story.

What I got was this:
Uncaught (in promise) TypeError: HTMLButtonElement.commandForElement setter: Value being assigned is not an object.

Then when reading this message, I found the clue!

'commandForElement' wants an object being passed and not an id!

In this case, what I had to pass here was 'toolbox_ctn' because that is the object and solved the error.

Also the command_for attribute here stays empty.

<button class="tbx-btn open relative" title="open" command="--open-toolbox" commandfor="">+</button>

Alternatively:

By using the following rule and instead of using HTMLButtonElement.commandForElement, it is possible to use an id.

create_elem.setAttribute('commandfor',command_for);

!For within this package I prefer to stick to HTMLButtonElement.commandForElement approach.

Final word:

When working with 'HTMLButtonElement.commandForElement' directly , it is an object to be passed and not an id!

That's it!

Top comments (2)

Kai Alder • Mar 23

Oh nice, I didn't know about the commandForElement property expecting an actual DOM element reference instead of a string id. That's a subtle gotcha. The error message is actually pretty helpful once you know what to look for though.

Quick question — have you run into any issues with the commandfor attribute when elements are created asynchronously? Like if the target element doesn't exist in the DOM yet when you set commandForElement, does it just silently fail or throw?

Also curious if you've compared this approach to just using custom events with dispatchEvent. I've been going back and forth on whether the new invoker commands are worth adopting yet given browser support is still catching up.