Attach "value" object to an <sl-tree-item>

[jamesarosen]

I'm building a tree selector out of a tree of rich JavaScript objects. The component that renders the tree and its tree-items is not necessarily the one that receives the sl-selection-change event. It would be nice for the receiver to get the associated object(s). Because these are rich objects, converting to and from strings for use with a data- property is inefficient.

For now, I've done this by attaching it to the element and reading it off with explicit casting:

function treeItem<T extends TreeData>(t) {
  treeItem = document.createElement('sl-tree-item');
  treeItem.textContent = t.toString();
  (treeItem as unknown as { value: T }) = t;
}

and

$tree.addEventListener('sl-selection-change', (e: CustomEvent<{ selection: SlTreeItemComponent[] }>) => {
  const selection = e.detail.selection as unknown as Array<SlTreeItemComponent & { value: TreeData }>;
  doSomethingWith(selection.map(ti => ti.value))
});

Does anyone have another idea? Is this a concept that's worth adding to the library?

[erdalkaraca]

Would be great to have a generic property on all components to attach custom objects to.
Example (using lit+vite):

@state() private node: TreeNode;

render() {
  return html`<sl-tree-item data=${this.node} @click=${this.onClick}></sl-tree-item>`
)

Then, on click, I would like to extract the custom object:

onClick(event) {
  console.log(event.target.data)
}

[erdalkaraca]

I realized HTMLELements do not provide any mechanism to attach any complex object to itself - only string serializations.
I ended up doing this:

• create a look up table of known objects while populating the tree
• for each tree item set <sl-tree-item data-id=${node.id}>
• onclick just access the object from the look up table: node = lut[event.target.dataset["id"]]

Works, but a bit of overhead and needs to be repeated for any tree which needs object retrieval on any event.
I guess in other frameworks with virtual DOMs this would work as you can attach any object to a DOM node.

[erdalkaraca]

Correction:
When using @property({attribute: false}), i.e. disable creating attribute, it is possible to attach any complex object:

<sl-tree-item .model=${myComplexObject}>...<sl-tree-item>

I would suggest to define such a property on the superclass of all components.