Merge pull request #126 from phase2/feature/conditional-slot-template

Add conditional slot template method to `outline-element`

src/components/base/outline-element/outline-element.ts

@@ -1,4 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { queryAll, queryAssignedNodes, customElement } from 'lit/decorators.js';
 //import componentStyles from './outline-element.base.css.lit';
 
@@ -36,4 +38,39 @@ export class OutlineElement extends LitElement {
   // render(): TemplateResult {
   //   return html``;
   // }
+
+  /**
+   * Create a conditional slot.
+   *
+   * Generates the slot if there is slotted content. Includes a wrapper:
+   * ```
+   * <div id="header">
+   *   <slot name="outline-element--header"></slot>
+   * </div>
+   * ```
+   */
+  protected _conditionalSlotTemplate({
+    elementName,
+    slotNameStub,
+    wrapperElementType = 'div',
+    ariaLabel = null,
+  }: {
+    elementName: string;
+    slotNameStub: string;
+    wrapperElementType?: string;
+    ariaLabel?: string | null;
+  }): TemplateResult | null {
+    const namespacedSlotName = `${elementName}--${slotNameStub}`;
+
+    return this.querySelector(`[slot="${namespacedSlotName}"]`) !== null
+      ? html`<${unsafeStatic(
+          wrapperElementType
+        )} id="${slotNameStub}" aria-label="${ifDefined(ariaLabel)}">
+          <slot
+            name="${namespacedSlotName}"
+            @slotchange="${() => this.requestUpdate()}"
+          ></slot>
+        </${unsafeStatic(wrapperElementType)}>`
+      : null;
+  }
 }