웹 구성 요소 - ChoDragon9/posts GitHub Wiki

API

IE을 지원하는 경우 폴리필을 사용해야함.

웹 구성 요소는 세 가지 중요 기술로 구성된다.

  • HTML 템플릿
    • <template> 태그는 콘텐츠가 렌더링되지는 않지만 JS 코드에서 동적인 콘텐츠를 생성하는 데 스탬프로 사용되도록 하려는 경우에 유용하다.
  • Custom Element
    • 자신만의 DOM Element를 작성할 수 있다.
  • Shadow DOM
    • 웹 컴포넌트가 컴포넌트 외부의 DOM에 영향을 받지 않아야 하는 경우 유용하다.
    • 다른 사람들과 공유할 수 있도록 컴포넌트 라이브러리나 위젯을 작성하려는 경우에 매우 유용하다.

Custom Element

  • 대시로 구분된 두 단어 이상의 태그를 사용해야 한다.
  • 한 단어 태그는 W3C에서만 단독으로 사용할 수 있다.

mounted

<hello-world />

<script>
  class HelloWorld extends HTMLElement {
    connectedCallback() {
      window.requestAnimationFrame(() => {
        this.innerHTML = '<div>Hello World</div>'
      })
    }
  }

  window.customElements
    .define('hello-world', HelloWorld);
</script>

window.onload 이후에서 define 해도 렌더링된다.

window.onload = () => {
  setTimeout(() => {
    window.customElements
      .define('hello-world', HelloWorld);
  }, 1000);
}

Attribute 변경감지

<hello-world onclick="changeColor()"></hello-world>

<script>
  class HelloWorld extends HTMLElement {
    static get observedAttributes () {
      return ['color']
    }
    get color () {
      return this.getAttribute('color') || 'black'
    }
    set color (value) {
      this.setAttribute('color', value)
    }
    attributeChangedCallback (name, oldValue, newValue) {
      if (!this.div) {
        return
      }

      if (name === 'color') {
        this.div.style.color = newValue;
      }
    }
    connectedCallback() {
      window.requestAnimationFrame(() => {
        this.div = document.createElement('div');
        this.div.textContent = 'Hello World';
        this.div.style.color = this.color;
        this.appendChild(this.div);
      })
    }
  }

  window.customElements
    .define('hello-world', HelloWorld);

  const changeColor = () => {
    document
      .querySelector('hello-world')
      .setAttribute('color', 'red')
  };
</script>
⚠️ **GitHub.com Fallback** ⚠️