infra-sk/modules/ElementSk/ElementSk.ts

/**
 * @module infra-sk/modules/ElementSk
 * @description <h2><code>ElementSk</code></h2>
 *
 */
import { render } from 'lit-html';
import { upgradeProperty } from 'elements-sk/upgradeProperty';

/**
 * A base class that records the connected status of the element in this._connected and provides a
 * _render() function that doesn't do anything if this this._connected is false.
 *
 * @example
 *
 * class MyElement extends ElementSk {
 *   greeting = "Hello";
 *
 *   constructor() {
 *     super((ele: MyElement) => html`<p>${ele.greeting} World!</p>`);
 *   }
 *
 *   connectedCallback() {
 *     super.connectedCallback();
 *     this._render();
 *   }
 * }
 */
export class ElementSk extends HTMLElement {
  protected _template: ((el: any)=> unknown) | null = null;

  protected _connected: boolean = false;

  /**
   * @param templateFn A function that, when applied to this component, will returns the component's
   *     lit-html template.
   */
  constructor(templateFn?: (el: any)=> unknown) {
    super();
    this._template = templateFn || null;
  }

  connectedCallback() {
    this._connected = true;
  }

  disconnectedCallback() {
    this._connected = false;
  }

  /**
   * Capture the value from the unupgraded instance and delete the property so
   * it does not shadow the custom element's own property setter.
   *
   * See this [Google Developers article]{@link
   *    https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
   *    } for more details.
   *
   * @param name Property name.
   */
  protected _upgradeProperty(name: string) {
    upgradeProperty(this, name);
  }

  /**
   * Renders the lit-html template found at this._template if not-null, but only if
   * connectedCallback has been called.
   */
  protected _render() {
    if (this._connected && !!this._template) {
      render(this._template(this), this, { eventContext: this });
    }
  }
}