Introduction

And here is how all begins.

export default class extends HTMLElement {
  static get observedAttributes() {
    return ['record', 'context-data'];
  }

  constructor() {
    super();
  }

  connectedCallback() {
    this.update();
  }

  disconnectedCallback() {
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    this.update();
  }

  get record() {
    return JSON.parse(this.getAttribute('record'));
  }

  set record(value) {
    this.setAttribute('record', JSON.stringify(value));
  }

  get contextData() {
    return JSON.parse(this.getAttribute('context-data'));
  }

  update() {
    let template = '';

    if (this.record) {
      template = `
        <h3>Record Values</h3>
        <pre>${JSON.stringify(this.record, undefined, 2)}</pre>
      `;
    }

    this.innerHTML = template;
  }
}

export default class extends HTMLElement {
  static get observedAttributes() {
    return ['record', 'context-data'];
  }

  constructor() {
    super();
  }

  connectedCallback() {
    this.update();
  }

  disconnectedCallback() {
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    this.update();
  }

  get record() {
    return JSON.parse(this.getAttribute('record'));
  }

  set record(value) {
    this.setAttribute('record', JSON.stringify(value));
  }

  get contextData() {
    return JSON.parse(this.getAttribute('context-data'));
  }

  update() {
    let template = '';

    if (this.record) {
      template = `
        <h3>Record Values</h3>
        <pre>${JSON.stringify(this.record, undefined, 2)}</pre>
      `;
    }

    this.innerHTML = template;
  }
}

Copy

Move out common elements

import { SwimlaneElement } from '@swimlane/element@1'

export default class extends SwimlaneElement {
  update() {
    let template = '';

    if (this.record) {
      template = `
        <h3>Record Values</h3>
        <pre>${JSON.stringify(this.record, undefined, 2)}</pre>
      `;
    }

    this.innerHTML = template;
  }
}

import { SwimlaneElement } from '@swimlane/element@1'

export default class extends SwimlaneElement {
  update() {
    let template = '';

    if (this.record) {
      template = `
        <h3>Record Values</h3>
        <pre>${JSON.stringify(this.record, undefined, 2)}</pre>
      `;
    }

    this.innerHTML = template;
  }
}

Copy

Import and extend the swimlane element

Returning just a render method

import { SwimlaneElement, html } from '@swimlane/element@1';

export default class extends SwimlaneElement {
  render() {
   	html`
      <h3>Record Values</h3>
      <pre>${JSON.stringify(this.record, undefined, 2)}</pre>`;
  }
}

import { SwimlaneElement, html } from '@swimlane/element@1';

export default class extends SwimlaneElement {
  render() {
   	html`
      <h3>Record Values</h3>
      <pre>${JSON.stringify(this.record, undefined, 2)}</pre>`;
  }
}

Copy

Import lit-html and define only the render method.

Test

...

Introduction

Move out common elements

Returning just a render method