CustomElementRegistry

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

메서드

CustomElementRegistry.define()
새로운 사용자 지정 요소를 정의합니다.
CustomElementRegistry.get()
유명 사용자 지정 요소의 생성자를 반환합니다. 그런 요소가 없는 경우 undefined를 대신 반환합니다.
CustomElementRegistry.upgrade()
사용자 지정 요소가 자신의 섀도 루트(shadow root)에 연결되기 전에 직접 업그레이드합니다.
CustomElementRegistry.whenDefined()
주어진 이름의 사용자 지정 요소가 등록되는 순간 이행하는, 빈 Promise를 반환합니다. 만약 그런 요소가 이미 등록된 경우 즉시 이행합니다.

예제

다음 코드는 word-count-web-component 예제에서 가져온 것입니다(라이브로 확인하세요). 사용자 지정 요소 클래스를 생성한 후, CustomElementRegistry.define() 메서드로 등록하는 과정을 살펴보세요.

// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    var wcParent = this.parentNode;

    function countWords(node){
      var text = node.innerText || node.textContent
      return text.split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create text node and add word count to it
    var text = document.createElement('span');
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);


    // Update count when element content changes
    setInterval(function() {
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200)

  }
}

// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });

명세

Specification Status Comment
HTML Living Standard
The definition of 'CustomElementRegistry' in that specification.
Living Standard Initial definition.

브라우저 호환성

BCD tables only load in the browser