customElements.define으로 요소 정의하기

사용자 지정 요소를 사용하면 JavaScript 클래스에 기반한 자신만의 HTML 태그를 만들 수 있습니다. 한 번 정의하면 <my-card>는 내장 요소처럼 작동합니다. HTML에 작성하고, 조회하고, 스타일을 지정하고, 스크립트로 제어하고, 프레임워크 안에서 수정 없이 사용할 수 있습니다.

모든 사용자 지정 요소 이름에는 하이픈이 하나 이상 포함되어야 합니다. 예를 들면 user-avatar, app-button, my-card가 있습니다. 하이픈은 사용자 지정 요소를 현재 및 향후의 내장 HTML 태그와 구분하며 명세에서 이를 강제합니다.

사용자 지정 요소는 HTMLElement 또는 내장 하위 클래스를 확장하는 클래스입니다. 클래스에는 생성자와 수명 주기 콜백을 선언할 수 있습니다. 클래스의 공개 속성과 메서드는 요소의 스크립트 인터페이스가 됩니다.

customElements.define("my-card", MyCard)는 태그 이름으로 클래스를 등록합니다. 등록 후에는 문서에 이미 존재하거나 앞으로 추가되는 모든 <my-card>가 해당 클래스의 인스턴스로 업그레이드됩니다.

생성자는 this를 사용하기 전에 첫 번째 문장으로 super()를 호출해야 합니다. super()를 생략하면 “Failed to construct 'HTMLElement'” 오류가 발생합니다. 이를 JavaScript 클래스 생성자에 적용되는 표준 규칙으로 이해하십시오.

생성자는 요소의 속성이나 자식을 읽을 수 없습니다. 생성 시점에는 아직 파싱되지 않았을 수 있기 때문입니다. DOM을 다루는 설정은 요소가 문서에 들어온 후에만 실행되는 connectedCallback으로 옮기십시오.

요소 이름은 페이지마다 한 번만 등록할 수 있습니다. 같은 이름을 다시 정의하면 NotSupportedError가 발생합니다. 개발 중 변경 사항을 테스트하려면 페이지를 다시 로드하고, 운영 환경에서는 시작 시 각 구성 요소를 한 번만 등록하십시오.

사용자 지정 요소는 모든 최신 브라우저에 포함되어 있습니다. 아주 오래된 브라우저(대부분 현재는 사용되지 않음)에서는 webcomponents.js 폴리필이 대체 방식을 제공합니다. 새 프로젝트에서는 네이티브 기능을 제공하고 폴리필은 완전히 생략할 수 있습니다.

customElements.get("my-card")는 정의된 경우 클래스를 반환하고, 그렇지 않으면 undefined를 반환합니다. customElements.whenDefined("my-card")는 요소가 등록되면 해결되는 프라미스를 반환하므로, 늦게 로드되는 정의를 기다려야 하는 코드에 유용합니다.

정의된 요소는 내장 태그와 정확히 같은 방식으로 사용하십시오. HTML에 (<my-card></my-card>) 작성하거나, document.createElement("my-card")로 만들거나, new MyCard()로 인스턴스화한 후 삽입할 수 있습니다. 세 경로 모두 같은 업그레이드된 인스턴스를 생성합니다.

같은 페이지의 다른 라이브러리와 충돌하지 않도록 사용자 지정 요소에 프로젝트 또는 회사 이름을 접두사로 붙이십시오(cd-card, app-modal). 웹 컴포넌트 생태계는 번들로 묶여 있지 않으므로 페이지의 누구나 이름을 등록할 수 있고, 먼저 등록한 항목이 우선합니다.

모든 사용자 지정 요소 이름에 하이픈이 포함되어야 하는 이유는 무엇입니까?

사용자 지정 요소는 HTMLElement를 확장하는 JavaScript 클래스이며, 이름에 하이픈이 포함된 customElements.define("name", Class)로 등록합니다. 생성자는 먼저 super()를 호출해야 하고 DOM을 읽어서는 안 되며, DOM 작업은 connectedCallback으로 미루어야 합니다. 정의된 요소는 어디서나 내장 태그와 정확히 같은 방식으로 작동합니다.