class HelloElement extends HTMLElement {
  // 'name' 이라는 속성의 변화를 감시한다.
  static get observedAttributes() {
    return ["name"];
  }

  // 속성의 변화에 반응한다.
  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr == "name") {
      this.textContent = `Hello, ${newValue}`;
    }
  }
}

// 새로운 엘리멘트들 정의한다.
customElements.define("hello-element", HelloElement);

class FancyDrawer extends AppDrawer {
  constructor() {
    super(); // always call super() first in the constructor. This also calls the extended class' constructor.
    ...
  }

  toggleDrawer() {
    // Possibly different toggle implementation?
    // Use ES2015 if you need to call the parent method.
    // super.toggleDrawer()
  }

  anotherMethod() {
    ...
  }
}

customElements.define('fancy-app-drawer', FancyDrawer);

class Square extends HTMLElement {
  // Specify observed attributes so that
  // attributeChangedCallback will work
  static get observedAttributes() {
    return ['c', 'l'];
  }

  constructor() {
    // Always call super first in constructor
    super();
  }

  connectedCallback() {
    console.log('Custom square element added to page.');
    updateStyle(this);
  }

  disconnectedCallback() {
    console.log('Custom square element removed from page.');
  }

  adoptedCallback() {
    console.log('Custom square element moved to new page.');
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log('Custom square element attributes changed.');
    updateStyle(this);
  }
}

document.body.appendChild(document.createElement('span')).innerHTML =
"<style>div {background-color: green}</style>"

document.body.appendChild(document.createElement('span'))
  .attachShadow({mode: 'open'})
  .innerHTML = '<style>div { background-color: #82b74b; }</style><div>야호!</div>';