x-element / potential bug

x-pages.js

import XElement from '../@netflix/x-element/x-element.js';

export default class XPages extends XElement {
  static get properties() {
    return {
      current: {
        type: String,
        reflect: true,
      },
      items: {
        type: Object,
      },
      model: {
        type: Object,
      },
      pageElement: {
        // Note: can't use a type here because HTMLSlotElement does not inherit from HTMLElement *shrug*
        input: ['pageElementName'],
        compute: this.computePageElement,
      },
      pageElementName: {
        type: String,
        internal: true,
        input: ['items', 'current'],
        compute: this.computePageElementName,
      },
    };
  }

  static template(html) {
    return ({ pageElement, model }) => {
      // bind model to view
      pageElement.model = model;
      return html`
        <style>
          :host,
          #container,
          #container > * {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
          }
        </style>
        <div id="container">${pageElement}</div>
      `;
    }
  }

  static computePageElementName(items, current) {
    if (items && current in items) {
      return items[current];
    }
  }

  static computePageElement(pageElementName) {
    if (pageElementName) {
      return document.createElement(pageElementName);
    } else {
      // if there's no page to display, a slot allows default content to be displayed
      return document.createElement('slot');
    }
  }
}

customElements.define('x-pages', XPages);