Select Rich Invoker cloning Option LightDOM nodes

[jorenbroekema]

Below is a code snippet where I extend LionOption.

import { html, LitElement, render } from '@lion/core';
import { LionOption } from '@lion/listbox';

export class ColorOption extends LionOption {
  static get properties() {
    return {
      color: { attribute: false }
    }
  }

  updated(changedProperties) {
    super.updated(changedProperties);
    if (changedProperties.has('color')) {
      this.choiceValue = this.color.toLowerCase();
    }

    // Render to LightDOM, otherwise invokerNode cannot clone
    // Leave createRenderRoot default for styling purposes
    render(html`
      <!-- Probably should use a custom element here to encapsulate these styles -->
      <div style="display:flex; align-items: center; gap: 0.5em">
        <div style="width: 20px; height: 15px; background-color: ${this.color.toLowerCase()}"></div>
        <p style="margin: 0">${this.color}</p>
      </div>
    `, this);
  }
}

As you can see, there's a small inconvenience here that isn't very intuitive

• Rendering to ShadowDOM means the invokerNode won't copy over the nodes to itself when the option is selected
• Setting createRenderRoot to this is possible, but then I lose some of the style encapsulation on LionOption or my own FooOption extension (imagine that I don't extend LionOption here but I extend FooOption which extends LionOption, and FooOption has its own shadow styles that I want to keep intact).
• I am forced to render to LightDOM imperatively to get the outcome I need

Here's the code in LionSelectInvoker that is causing the problem:

/**
 * @protected
 * @returns {TemplateResult|Node[]|string|null}
 */
_contentTemplate() {
  if (this.selectedElement) {
    const labelNodes = Array.from(this.selectedElement.childNodes);
    if (labelNodes.length > 0) {
      return labelNodes.map(node => node.cloneNode(true));
    }
    return this.selectedElement.textContent;
  }
  return this._noSelectionTemplate();
}

As you can see, it only copies over this.selectedElement.childNodes but it doesn't do anything with things rendered to the shadowDOM, this is essentially by design, because you can't just copy both without having a custom-element as a "proxy" to make that work. Rendering the selectedElement itself in the invoker would also probably not look great..

I think the best way at the moment is my code snippet, but render a custom element of your own to the LightDOM if you need to encapsulate some styles in it, that works alright, but I do feel as though this should probably be documented if that is the best practice here.

Would you say this current behavior is as good as it gets, or do you see potential improvements?