요약

  • W3C는 2013년 5월 14일 Custom Elements의 첫 공개 초안을 냈다. 2016년 초안은 클래스, 등록부, 기존 요소의 업그레이드와 생애주기 콜백을 설명했고, 2018년 노트는 관련 규칙이 DOM과 HTML로 옮겨지는 과정을 기록했다.
  • 현재 HTML 표준에서 작성자는 CustomElementRegistry에 정의를 등록한다. 브라우저는 맞는 요소를 찾아 업그레이드하고 연결, 분리, 관찰 대상 속성 변경에 따른 반응을 실행한다.

뉴스 편집부가 사진, 제목, 링크를 묶은 카드를 여러 페이지에서 쓰고 싶다고 하자. 모든 페이지에서 스크립트가 카드를 찾아다니며 일을 맡길 수도 있다. 브라우저에 카드 이름과 정의를 등록해 두고 해당 태그가 나타날 때 연결할 수도 있다. 두 번째 방식에서는 업무 지침이 페이지를 순찰하는 별도 사람에게서 태그 자신에게로 옮겨 간다.

2013년 5월 14일 W3C 첫 공개 작업 초안은 작성자가 새로운 DOM 요소 유형을 정의하는 방법을 제안했다. 초기 설계는 이름과 프로토타입, 생애주기 호출을 엮었다. 뒤에 기술적 세부가 달라졌어도 브라우저가 새 유형의 신분을 다루고 작성자가 행동을 만든다는 배분은 보였다.

2016년 6월 9일 W3C 작업 초안은 더 익숙한 모습을 보여 준다. HTMLElement를 상속한 클래스를 만들고 customElements.define()으로 등록한다. 초안의 예에서는 정의가 등록되기 전에 요소가 이미 문서에 있다. 정의가 도착하면 해당 요소가 업그레이드된다. 자리를 먼저 마련해 두고 직무 설명서는 뒤늦게 도착할 수 있다.

등록부는 이름을 검사하고 업그레이드와 반응의 순서를 다룬다. 자율 사용자 정의 요소의 이름에 들어가는 하이픈은 작성자 태그의 공간을 구별한다. 클래스는 관찰할 속성을 선언하고, attributeChangedCallback()에서 변화를 처리한다. connectedCallback()은 문서에 연결될 때, disconnectedCallback()은 떠날 때 실행된다. 브라우저가 이러한 호출을 배치하고 카드 작성자가 그때 할 일을 쓴다.

카드의 경력은 첫 출근에서 끝나지 않는다. HTML에 먼저 나타났다가 나중에 정의될 수 있고, 이동한 뒤 다시 연결될 수도 있다. 작성자의 코드는 그런 순서를 견뎌야 한다. 브라우저는 신분과 호출 시점을 관리한다. 사진과 제목을 어떻게 보여 줄지는 편집부가 결정한다. 인사 담당자가 기사를 써 주지는 않는다.

독립 명세는 뒤에 주소를 옮겼다. 2018년 5월 3일 W3C 작업반 노트는 Custom Elements의 내용이 DOM, HTML 등으로 편입되고 있다고 설명한다. W3C 발행 기록은 2013년부터의 경로를 남긴다. 현재의 WHATWG HTML Living Standard Custom Elements 장은 등록부, 이름 검사, 업그레이드, 반응 대기열을 다룬다. 문서 이동과 폼 참여 등 나중에 발전한 상황도 포함한다.

Shadow DOM은 컴포넌트의 내부 트리와 바깥 내용의 관계를 다룬다. Custom Elements는 태그의 신분과 생애주기를 다룬다. 뉴스 카드는 둘 다 쓸 수 있다. 하나는 방의 도면이고 다른 하나는 직원증과 출근표다.