Add conditional slot template method to outline-element

[damontgomery]

This is a feature we use on an internal project.

• Only renders the wrapper / slot when there is content
• Works when the slot content changes
• Supports other wrappers like ul if needed
• Supports accessible aria-label if set

I've found styling the wrappers to be more helpful than the slot content itself in most cases. For alignment / basic text styles. Even if the slotted content is expected to be there, the other features seem nice.

I don't always use it when the slot wrapper is more complex / needs siblings, etc. But most of the time, I just use this.

In the codebase, we use this pattern:

import { html, TemplateResult, CSSResultGroup } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import componentStyles from './example-video.css.lit';
import { OutlineElement } from '../../base/outline-element/outline-element';

const elementName = 'example-video';

export const videoPositions = ['left', 'right'] as const;
export type VideoPosition = typeof videoPositions[number];

export interface ExampleVideoInterface extends HTMLElement {
  videoPosition: VideoPosition;
}

/**
 * The Example video component
 *
 * @element example-video
 * @slot example-video--video - video
 * @slot example-video--heading - heading
 * @slot example-video--content - content
 * @slot example-video--footer - footer
 */
@customElement(elementName)
export class ExampleVideo
  extends OutlineElement
  implements ExampleVideoInterface
{
  static styles: CSSResultGroup = [componentStyles];

  @property({ type: String, reflect: true, attribute: 'video-position' })
  videoPosition: VideoPosition = 'left';

  render(): TemplateResult {
    return html`
      <div id="video-wrapper">
        ${this._conditionalSlotTemplate({
          elementName,
          slotNameStub: 'video',
        })}
        <div id="content-wrapper">
          ${this._conditionalSlotTemplate({
            elementName,
            slotNameStub: 'heading',
          })}
          ${this._conditionalSlotTemplate({
            elementName,
            slotNameStub: 'content',
          })}
          ${this._conditionalSlotTemplate({
            elementName,
            slotNameStub: 'footer',
          })}
        </div>
      </div>
    `;
  }
}

[himerus]

Need to convert this PR description into documentation.