simple custom element

by James Doyle

HTML

<x-foo-with-markup></x-foo-with-markup>
<x-foo-with-markup disabled></x-foo-with-markup>

JavaScript

customElements.define('x-foo-with-markup', class extends HTMLElement {
  connectedCallback() {
    const style = this.disabled ? ' style="color: #aaa; cursor: not-allowed"' : '';
    this.innerHTML = `<p><b${style}>I'm an x-foo-with-markup!</b></p>`;
  }
  get disabled() {
    return this.hasAttribute('disabled');
  }
  set disabled(val) {
    // Reflect the value of the open property as an HTML attribute.
    if (val) {
      this.setAttribute('disabled', '');
    } else {
      this.removeAttribute('disabled');
    }
  }
});