text: import { LionButton } from '@lion/button';
  import { html } from '@lion/core';
  
  /**
   * LionSelectInvoker: invoker button consuming a selected element
   *
   * @customElement lion-select-invoker
   * @extends LionButton
   */
  export class LionSelectInvoker extends LionButton {
    static get properties() {
      return {
        selectedElement: {
          type: Object,
        },
        readOnly: {
          type: Boolean,
          reflect: true,
          attribute: 'readonly',
        },
      };
    }
  
    get slots() {
      return {
        ...super.slots,
        after: () => {
          const icon = document.createElement('span');
          icon.textContent = '▼';
          return icon;
        },
      };
    }
  
    get contentWrapper() {
      return this.shadowRoot.getElementById('content-wrapper');
    }
  
    constructor() {
      super();
      this.selectedElement = null;
      this.type = 'button';
    }
  
    _contentTemplate() {
      if (this.selectedElement) {
        const labelNodes = Array.from(this.selectedElement.querySelectorAll('*'));
        if (labelNodes.length > 0) {
          return labelNodes.map(node => node.cloneNode(true));
        }
        return this.selectedElement.textContent;
      }
      return ``;
    }
  
    _renderBefore() {
      return html`
        <div id="content-wrapper">
          ${this._contentTemplate()}
        </div>
      `;
    }
  
    // eslint-disable-next-line class-methods-use-this
    _renderAfter() {
      return html`
        <slot name="after"></slot>
      `;
    }
  }
  