220922(목)

// 아래와 같이 HTMLElement를 상속하는 개념으로 나만의 element의 클래스 객체를 만든다.
// 참고로 class내의 this는 커스텀 엘리먼트 그 자체를 바인딩한다.
class JaydenCustom extends HTMLElement {
  constructor() {
    super();
    this.render();
  }

  // 필수는 아니지만, render와 getTemplate 메서드를 통해 좀더 원하는 형태의 element를 만들 수 있다.
  render() {
    this.innerHTML = this.getTemplate();
  }

  getTemplate() {
    return `
        <div></div>
        <div></div>
        `;
  }

  /*
  connectedCallback: 커스텀 엘리먼트가 추가될 때, 호출된다. 주로 이곳에서 이벤트 핸들러를 다룬다.
  여기서 주의할 점은 consructor에서는 이 요소가 `만들어질 때`이고 여기는 `추가될 때`라는 점이다.
  */
  connectedCallback() {}
  // disconnectedCallback: 커스텀 엘리먼트가 제거될 때, 호출된다. 주로 위에서 생성한 이벤트 등의 정보를 지울 때 사용한다.
  disconnectedCallback() {}

  /*
  static get observedAttributes()에서는 `감시할 속성`을 알려주는 역할을 한다. [] 배열 형태로 속성을 전달한다.
  */
  static get observedAttributes() {
    return [];
  }
  // 위에서 감시 대상이 된 속성의 값이 변경될 때마다 실행된다.
  attributeChangedCallback(name, oldValue, newValue) {}

  // 아무렇게나 원하는 메서드를 작성하여 활용할 수 있다.
  anything() {}
}

// 반드시 이렇게 커스텀 엘리먼트를 정의해주어야한다.
// 또한, 커스텀 엘리먼트는 `aaa-bbb`와 같은 형식의 태그명을 갖도록 한다.
customElements.define('jayden-custom', JaydenCustom);

class JaydenShadow extends HTMLElement {
  constructor() {
    super();
    // this는 커스텀 엘리먼트를 바인딩, 즉 커스텀 엘리먼트에 shadow DOM을 붙여준다.
    this.attachShadow({ mode: 'open');
    this.render();
  }

  render() {
    // 아래와 같이 shadowDOM에 접근하기 위해서는 shadowRoot를 이용해야한다.
    this.shadowRoot.innerHTML = this.getTemplate();
  }

  getTemplate() {
    return `
        <style>
        div {
          background-color: tomato;
        }
        </style>
        <div></div>
        <div></div>
        `;
  }
  // 위에서 커스텀 엘리먼트 내부(정확히는 쉐도우돔)에 속한 div를 제외하고는 배경색(tomato) 값을 갖지 않는다.
  // 즉, 커스텀 엘리먼트만의 독자적인 공간을 만들 수 있는 것이다.

  connectedCallback() {}
  disconnectedCallback() {}


  static get observedAttributes() {
    return [];
  }
  attributeChangedCallback(name, oldValue, newValue) {}
}


customElements.define('jayden-shadow', JaydenShadow);