When you want slots but need to tweak the content a bit.

pfe-clipboard.html

<!-- icon slot -->
${!this.noIcon ? `
    <div class="pfe-clipboard__icon">
        <slot name="icon" id="icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 15.277 16"><defs><style>.a{fill:#6a6e73;}</style></defs><g transform="translate(-2.077 -1.807)"><path class="a" d="M15.34,2.879a3.86,3.86,0,0,0-5.339,0L6.347,6.545a3.769,3.769,0,0,0,0,5.339.81.81,0,0,0,1.132,0,.823.823,0,0,0,0-1.145A2.144,2.144,0,0,1,7.5,7.677l3.641-3.654a2.161,2.161,0,1,1,3.049,3.062l-.8.8a.811.811,0,1,0,1.145,1.132l.8-.8a3.769,3.769,0,0,0,0-5.339Z" transform="translate(0.906 0)"/><path class="a" d="M10.482,6.822a.823.823,0,0,0,0,1.145,2.161,2.161,0,0,1,0,3.049L7.343,14.155a2.161,2.161,0,0,1-3.062,0,2.187,2.187,0,0,1,0-3.062l.193-.116a.823.823,0,0,0,0-1.145.811.811,0,0,0-1.132,0l-.193.193a3.86,3.86,0,0,0,0,5.339,3.86,3.86,0,0,0,5.339,0l3.126-3.139A3.731,3.731,0,0,0,12.72,9.562a3.769,3.769,0,0,0-1.094-2.74A.823.823,0,0,0,10.482,6.822Z" transform="translate(0 1.37)"/></g></svg>
        </slot>
    </div>
` : ""}
<div class="pfe-clipboard__text">
    <slot name="text" id="text">Copy URL</slot>
</div>
<div class="pfe-clipboard__text--success" role="alert">
    <slot name="text--success" id="text--success">Copied</slot>
</div>
<!-- hidden default slot to transpose to text slot -->
<slot hidden data-slot="text"></slot>

pfe-clipboard.js

class PfeClipboard extends PFElement {
  ...
  
  /**
   * Transpose content from one slot to another. Accounts
   * for empty default content and filters it.
   * @todo Provide hook to allow users to add their own filtering logic.
   * @todo Convert from slotchange to MutationObserver to observe children.
   * @example
   * // Decorate the source slot with a `hidden` attribute and a `data-slot`
   * // attribute where the destination slot name is provided.
   * // <slot hidden data-slot="text"></slot>
   * _slotchangeHandler(event) { this._transposeSlot(event) }
   *
   * @param {event} SlotchangeEvent
   * @return void
   */
  _transposeSlot(event) {
    const source = event.target;
    const slot = source.dataset.slot;
    const target = this.shadowRoot.querySelector(`slot[name="${slot}"]`);
    const fallbackContentVariable = `_transposeSlot${slot}`;
    // Store the default content of the target for later use.
    if (typeof this[fallbackContentVariable] === "undefined") {
      this[fallbackContentVariable] = target.innerHTML;
    }
    // Get all children for the source slot. We need to include flatten to make sure we get the content.
    const childNodes = [...source.assignedNodes({ flatten: true })];
    // Trim the content nodes for whitespace and combine it into one string for evaluation.
    const childContent = childNodes.map(child => child.textContent.trim()).join("");
    // Find out if there is any non whitespace content
    if (childContent !== "") {
      // Transpose the content to the target slot
      target.innerHTML = childContent;
    }
    // If there isn't any content then we are going to place the target slot's default content back in.
    else {
      target.innerHTML = this[fallbackContentVariable];
    }
  }
}