shadow-dom-8.js

class MyElement extends HTMLElement {
    static get observedAttributes() {return ['lang']; }
    constructor() {
      super();
      // add shadow root in constructor
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.innerHTML = `
        <style>div { background-color: #82b74b; }</style>
        <div>yey</div>
      `;
      this._yey = shadowRoot.querySelector('div');
    }
    attributeChangedCallback(attr, oldValue, newValue) {
      if (attr == 'lang') {
        let yey;
        switch (newValue) {
          case 'ko':
            yey = '만세!';
          break;
          case 'es':
            yey = 'hooray!';
          break;
          case 'jp';
            yey = '万歳!';
          break;
          default:
            yey = 'yey!';
        }
        this._yey.innerText = yey;
      }
    }
    yell() {
      alert(this._yey.innerText);
    }
  }
  window.customElements.define('my-element', MyElement);