CustomElementRegistry

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

CustomElementRegistry 인터페이스는 사용자 지정 요소를 등록하고, 기존에 등록한 요소를 가져올 수 있는 메서드를 제공합니다. CustomElementRegistry의 인스턴스를 가져오려면 window.customElements 속성을 사용하세요.

메서드

CustomElementRegistry.define()

새로운 사용자 정의 요소를 정의합니다.

CustomElementRegistry.get()

주어진 이름을 붙인 사용자 정의 요소의 생성자를 반환합니다. 해당하는 이름에 정의된 요소가 존재하지 않으면 undefined를 대신 반환합니다.

CustomElementRegistry.upgrade()

사용자 정의 요소를 직접 업그레이드합니다. 요소가 자신의 섀도 루트(shadow root)와 연결되지 않아도 업그레이드할 수 있습니다.

CustomElementRegistry.whenDefined()

주어진 이름의 사용자 정의 요소가 등록되는 순간 이행하는 빈 Promise를 반환합니다. 만약 해당하는 이름의 요소가 이미 정의된 경우, 반환하는 프로미스는 즉시 이행합니다.

예제

다음 코드는 word-count-web-component 예제에서 가져와 주석을 번역한 것입니다(실행 결과 미리보기). 사용자 지정 요소 클래스를 생성한 후, CustomElementRegistry.define() 메서드로 등록하는 과정을 살펴보세요.

js
// 요소의 클래스 생성
class WordCount extends HTMLParagraphElement {
  constructor() {
    // 생성자에선 항상 제일 먼저 super 호출
    super();

    // 요소 부모의 단어 수 세기
    const wcParent = this.parentNode;

    function countWords(node) {
      const text = node.innerText || node.textContent;
      return text
        .trim()
        .split(/\s+/g)
        .filter((a) => a.trim().length > 0).length;
    }

    const count = `Words: ${countWords(wcParent)}`;

    // 섀도 루트 생성
    const shadow = this.attachShadow({ mode: "open" });

    // 텍스트 노드 생성 후 단어 수로 채우기
    const text = document.createElement("span");
    text.textContent = count;

    // 텍스트 노드를 섀도 루트에 추가
    shadow.appendChild(text);

    // 요소 콘텐츠가 바뀌면 단어 수 업데이트
    setInterval(function () {
      const count = `Words: ${countWords(wcParent)}`;
      text.textContent = count;
    }, 200);
  }
}

// 새로운 요소 정의
customElements.define("word-count", WordCount, { extends: "p" });

참고: CustomElementRegistry는 Window.customElements 속성으로 접근할 수 있습니다.

명세서

Specification
HTML Standard
# custom-elements-api

브라우저 호환성

BCD tables only load in the browser