기본 제공 요소 확장하기

명세에서는 독립형 사용자 지정 요소(HTMLElement를 확장하며 <my-card>로 사용)와 내장 요소 확장형 사용자 지정 요소(특정 내장 클래스를 확장하며 <button is="my-button">으로 사용)를 정의합니다. 내장 요소 확장형은 내장 요소의 의미 체계를 그대로 상속합니다.

독립형 <my-button>에는 내장 <button>의 동작이 전혀 없습니다. Enter/Space로 활성화되지 않고, 폼에 참여하지 않으며, 보조 기술을 위한 role="button"도 제공되지 않습니다. 내장 요소 확장형 버튼(is="my-button")은 이러한 동작을 모두 자동으로 상속합니다.

HTMLElement 대신 구체적인 HTML 클래스를 확장하십시오. class MyButton extends HTMLButtonElement {} 요소는 모든 내장 동작인 폼 제출, 포커스 관리, 비활성화 상태를 유지하면서 그 위에 원하는 기능을 추가할 수 있습니다.

customElements.define("my-button", MyButton, { extends: "button" }) 세 번째 인수는 레지스트리에 요소가 확장하는 내장 태그를 알려 줍니다. 이 인수가 없으면 등록 시 오류가 발생합니다.

기존 태그에 is 속성을 사용하여 내장 요소 확장형을 사용하십시오. <button is="my-button">Click</button> 대신 <my-button>을 작성하면 독립형 요소가 생성되어 내장 동작을 잃게 됩니다.

사파리는 접근성 문제를 이유로 내장 요소 확장형 사용자 지정 요소의 구현을 거부해 왔습니다. 이 기능은 크롬, 엣지, 파이어폭스에서는 작동하지만 사파리에서는 is 속성이 무시되고 요소가 일반 <button>처럼 동작합니다. 사파리 지원이 필요하다면 공식 폴리필을 사용하십시오.

@ungap 폴리필은 사파리에서 내장 요소 확장형 사용자 지정 요소 지원을 복원합니다. 크기가 작고 유지 관리가 잘되므로, is 속성 패턴을 포기하지 않고 브라우저 간 지원이 필요할 때 포함하십시오.

폴리필 없이 사파리를 지원해야 한다면 독립형 요소를 만들고 필요한 동작을 직접 재현하십시오. role="button", tabindex="0", Enter/Space에 대한 키보드 처리기를 추가하고 ElementInternals를 통해 폼에 연결하십시오.

독립형 요소는 static formAssociated = true로 설정하고 this.attachInternals()를 사용하여 폼 제출에 참여할 수 있습니다. 반환되는 ElementInternals 객체는 완전한 폼 통합을 위한 setFormValue와 setValidity를 제공합니다.

내장 요소와 대부분 비슷하게 동작하는 구성 요소(꾸며진 버튼이나 똑똑한 입력 요소)에는 내장 요소 확장형을 선택하십시오. 플랫폼이 크롬/파이어폭스를 지원하거나 폴리필을 허용할 수 있을 때 적합합니다. 카드나 대화 상자처럼 완전히 새로운 구성 요소이고 대응하는 내장 요소가 없다면 독립형을 선택하십시오.

웹 구성 요소에서 가장 흔한 실수는 <my-button>을 독립형 요소로 만드는 것입니다. 이 요소는 폼을 제출하지 않고, Enter/Space에 반응하지 않으며, 버튼으로 안내되지도 않습니다. HTML 버튼 클래스를 확장하거나 실제 버튼의 모든 동작을 신중하게 재현하십시오.

버튼과 비슷한 구성 요소에서 HTMLElement를 확장하는 독립형 방식보다 HTMLButtonElement를 확장하는 내장 요소 확장형 방식이 실용적으로 유리한 점은 무엇인가요?

내장 요소 확장형 사용자 지정 요소는 특정 HTML 클래스(HTMLButtonElement, HTMLInputElement)를 확장하고 is 속성을 통해 사용되며, 모든 기본 동작을 상속합니다. { extends: "button" } 옵션으로 등록하십시오. 사파리는 이를 기본적으로 지원하지 않으므로, 완전한 브라우저 간 지원이 필요하다면 폴리필을 사용하거나 동작을 직접 재현하는 독립형 요소를 사용하십시오.