Rozszerzanie wbudowanych elementów

Specyfikacja definiuje autonomiczne elementy niestandardowe (rozszerzające HTMLElement, używane jako <my-card>) oraz niestandardowe elementy wbudowane (rozszerzające konkretną klasę wbudowaną, używane jako <button is="my-button">). Niestandardowe elementy wbudowane dziedziczą semantykę elementów wbudowanych bez dodatkowej pracy.

Autonomiczny <my-button> nie otrzymuje żadnego zachowania wbudowanego <button> — nie reaguje na aktywację klawiszami Enter/Space, nie uczestniczy w formularzach i nie ma role="button" dla technologii wspomagających. Niestandardowy przycisk (is="my-button") dziedziczy to wszystko automatycznie.

Zamiast HTMLElement należy rozszerzyć konkretną klasę HTML: class MyButton extends HTMLButtonElement {}. Element zachowuje wszystkie wbudowane zachowania — wysyłanie formularzy, zarządzanie fokusem i stan disabled — a Państwo mogą dodać własne rozszerzenia.

customElements.define("my-button", MyButton, { extends: "button" }). Trzeci argument informuje rejestr, który wbudowany znacznik rozszerza element. Bez niego rejestracja kończy się wyjątkiem.

Niestandardowych elementów wbudowanych należy używać z atrybutem is na istniejącym znaczniku: <button is="my-button">Click</button>. Zapisanie zamiast tego <my-button> utworzyłoby element autonomiczny i spowodowało utratę wbudowanego zachowania.

Safari odmówiło implementacji niestandardowych elementów wbudowanych, powołując się na obawy dotyczące dostępności. Działają one w Chrome, Edge i Firefox; w Safari atrybut is jest ignorowany, a element zachowuje się jak zwykły <button>. Jeśli wymagana jest obsługa Safari, należy użyć oficjalnego polyfillu.

Polyfill @ungap/custom-elements przywraca obsługę niestandardowych elementów wbudowanych w Safari. Jest niewielki i dobrze utrzymywany; należy go dołączyć, jeśli zespół potrzebuje obsługi wielu przeglądarek bez rezygnowania ze wzorca z atrybutem is.

Jeśli obsługa Safari bez polyfillu ma znaczenie, należy zamiast tego utworzyć element autonomiczny i ręcznie odtworzyć wymagane zachowanie: dodać role="button", tabindex="0", obsługę klawiatury dla Enter/Space oraz powiązanie z formularzem za pomocą API ElementInternals.

Elementy autonomiczne mogą uczestniczyć w wysyłaniu formularzy po ustawieniu static formAssociated = true i użyciu this.attachInternals(). Zwrócony obiekt ElementInternals udostępnia setFormValue i setValidity, zapewniając pełną integrację z formularzami.

Niestandardowe elementy wbudowane należy wybierać w przypadku komponentów, które w większości zachowują się jak element wbudowany (rozbudowany przycisk, inteligentne pole wejściowe), gdy obsługiwaną platformą są Chrome/Firefox lub gdy akceptują Państwo polyfill. Elementy autonomiczne należy wybierać dla całkowicie nowych komponentów (kart, okien dialogowych), które nie mają wbudowanego odpowiednika.

Najczęstszym błędem związanym z komponentami webowymi jest utworzenie <my-button> jako elementu autonomicznego. Nie będzie on przesyłać formularzy, reagować na klawisze Enter/Space ani być ogłaszany jako przycisk. Należy albo rozszerzyć HTMLButtonElement, albo starannie odtworzyć każde zachowanie prawdziwego przycisku.

Jaka jest praktyczna zaleta rozszerzenia HTMLButtonElement (niestandardowy element wbudowany) zamiast HTMLElement (element autonomiczny) w przypadku komponentu przypominającego przycisk?

Niestandardowe elementy wbudowane rozszerzają konkretną klasę HTML (HTMLButtonElement, HTMLInputElement) i są używane za pomocą atrybutu is, dziedzicząc całe natywne zachowanie. Należy je rejestrować za pomocą opcji { extends: "button" }. Safari nie obsługuje ich natywnie — gdy wymagana jest pełna obsługa wielu przeglądarek, należy użyć polyfillu albo elementów autonomicznych z ręcznie odtworzonym zachowaniem.