/**
 * plain-text
 *
 * Useful when we want to convert text with encoded text to plain text.
 * Eg. Jack & Jill   -->   Jack & Jill
 *
 * Usage: <plain-text text="Jack &amp; Jill"></plain-text>
 */

const template = document.createElement('template');
template.innerHTML = `<span></span>`;

class PlainText extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(template.content.cloneNode(true));

    // element selectors
    this.$text = shadow.querySelector('span');
  }

  render(text) {
    this.$text.innerHTML = text;
  }

  static get observedAttributes() {
    return ['text'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'text') {
      this.render(newValue);
    }
  }
}

window.customElements.define('plain-text', PlainText);