About the the commandfor attribute.

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);

Next:

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 caught 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!