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?