JavaScript를 사용한 웹 구성 요소

웹 구성 요소는 재사용 가능한 사용자 지정 HTML 요소를 만드는 방법입니다. 웹 구성 요소를 사용하면 JavaScript로 사용자 지정 HTML 요소를 만들 수 있습니다. ReactJS, VueJS와 같은 프레임워크/라이브러리도 재사용 가능한 사용자 지정 구성 요소를 제공합니다. 그러나 바닐라 JavaScript를 사용하면 사용자 지정 구성 요소를 만들 수도 있습니다. 또한 다른 DOM 요소와 분리된 사용자 정의 요소를 만들 수 있습니다.

웹 컴포넌트를 배우기 위해서는 세 가지를 이해해야 합니다.
사용자 정의 요소: JavaScript API를 사용하여 사용자 정의 DOM 요소/태그를 생성할 수 있습니다. 관례에 따라 사용자 정의 요소를 선언하려면 하이픈을 사용하십시오(예: <my-element></my-element> ). 다른 기본 요소를 방해하지 않도록 하이픈을 사용합니다.

Shadow DOM: 비공개의 격리된 사용자 지정 요소를 생성해야 하는 경우 Shadow DOM이라는 JavaScript API 집합을 사용합니다. 또한 기본 문서 DOM과 별도로 렌더링됩니다.

HTML 템플릿: 기본 렌더링 페이지에 표시되지 않는 몇 가지 HTML 요소가 있습니다. 실제로 요소 콘텐츠를 렌더링해야 할 때 해당 요소 콘텐츠를 렌더링할 수 있으며 해당 콘텐츠를 재사용할 수도 있습니다. 이러한 요소는 다음과 같습니다. <template> , <slot>

맞춤 요소

이제 커스텀 요소를 만드는 방법을 살펴보겠습니다. 사용자 정의 요소를 생성하기 위해 define API의 customElements 메서드를 호출해 보겠습니다.

customElements.define('my-component', CustomComponent);

이제 HTMLElement에서 CustomComponent 클래스를 확장하여 사용자 정의 요소를 생성해 보겠습니다.

class CustomComponent extends HTMLElement {
  connectedCallback() {
      this.innerHTML = `<p>Hello Universe</p>`;
  }
}
customElements.define('my-component', CustomComponent);

HTMLElement에는 4개의 수명 주기 후크가 있습니다. connectedCallback도 그 중 하나입니다. 요소가 DOM에 삽입될 때마다 실행됩니다. 그 안에 마크업을 추가하고 다른 구성 요소에서 종속성 데이터를 가져올 수 있습니다.

섀도우 DOM

또한 격리된 구성 요소를 만들 수도 있습니다. 격리된 구성 요소는 기본 DOM을 어지럽히지 않습니다. Shadow DOM이라는 라이트 대기 DOM에서 렌더링합니다. 기본 DOM에서는 모든 것이 전역 범위에 있습니다. 따라서 충돌 및 보안 문제가 쉽게 발생할 수 있습니다. Shadow DOM은 사용자 지정 구성 요소의 래퍼이며 구성 요소를 다른 기본 DOM 요소/구성 요소와 격리시킵니다. 모든 기본 DOM 요소 또는 사용자 지정 요소에 Shadow DOM을 연결할 수 있습니다.

class CustomComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<p>Hello Universe</p>`;
  }
}
customElements.define('my-component', CustomComponent);

.

HTML 템플릿

<template> 태그 내용이 페이지에서 렌더링되지 않습니다. 따라서 콘텐츠를 작성한 다음 사용자 지정 구성 요소에서 JavaScript로 해당 노드를 복제할 수 있습니다.

class TestComponent extends HTMLElement {
  constructor() {
    super();

    const templateNode = document.getElementById('my-template');
    const templateContent = templateNode.content;

    this.attachShadow({mode: 'open'}).appendChild(
      templateContent.cloneNode(true)
    );
  }
}

customElements.define('my-template', TestComponent);

.