Custom Element

class UpperCaseElement  extends HTMLElement {
 
  // 1. HTMLElement 클래스를 상속한다.
  constructor () {
    super ();
    this._text = null;
  }

  // 2. observedAttributes 메서드에서 감시할 속성을 지정 한다.
  static get observedAttributes () {
    return [ "text"];
  }

  // 3. attributeChangedCallback 감시할 내용, UI를 업데이트 한다.
  attributeChangedCallback (name, oldValue, newValue) {
    this._text = newValue;
    this._updateRendering();
  }

  // 4. 속성의 set, get, 업데이트 함수를 정의 한다.
  get text () {
    return this._text;
  }
  set text (v) {
    this.setAttribute ( "text", v);
  }
  _updateRendering () {
    this.textContent = this._text.toUpperCase();
  }
}

class UpperCaseElement  extends HTMLElement {
 
  constructor () {
    super ();
    this._text = null;
  }
  .....
}

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

  attributeChangedCallback (name, oldValue, newValue) {
    this._text = newValue;
    this._updateRendering();
  }

  get text () {
    return this._text;
  }
  set text (v) {
    this.setAttribute ( "text", v);
  }
  _updateRendering () {
    this.textContent = this._text.toUpperCase();
  }

connectedCallback () {
    this._updateRendering();
}

disconnectedCallback() {
}

customElements.define ( "uppercase-element", UpperCaseElement);

<uppercase-element text = "hello world"> </uppercase-element>

class ButtonCounter extends HTMLButtonElement {
  connectedCallback() {
    this.textContent = 0;
    this.addEventListener('click', this.increment);
  }
  increment(e) {
    e.currentTarget.textContent++;
  }
}

customElements.define( 'button-counter', ButtonCounter, {extends: 'button'});

document.body.appendChild(
  new ButtonCounter()
);

<button is="button-counter"></button>