Yerleşik Öğeleri Genişletme

Belirtim, bağımsız özel öğeleri (HTMLElement sınıfını genişleten ve <my-card> olarak kullanılan) ve özelleştirilmiş yerleşik öğeleri (belirli bir yerleşik sınıfı genişleten ve <button is="my-button"> olarak kullanılan) tanımlar. Özelleştirilmiş yerleşik öğeler, yerleşik anlambilimi kendiliğinden devralır.

Bağımsız bir <my-button> öğesi, yerleşik <button> davranışlarının hiçbirini edinmez: Enter/Boşluk ile etkinleştirme, formlara katılım ve yardımcı teknolojiler için düğme rolü yoktur. Özelleştirilmiş bir düğme (is="my-button") bunların tümünü otomatik olarak devralır.

HTMLElement yerine belirli HTML sınıfını genişletin: class MyButton extends HTMLButtonElement {}. Öğe, form gönderme, odak yönetimi ve devre dışı durumu gibi tüm yerleşik davranışlarını korur; siz de geliştirmelerinizi bunların üzerine eklersiniz.

customElements.define("my-button", MyButton, { extends: "button" }). Üçüncü bağımsız değişken, kayıt sistemine öğenin hangi yerleşik etiketi genişlettiğini bildirir. Bu bağımsız değişken olmadan kayıt işlemi hata verir.

Özelleştirilmiş yerleşik öğeleri mevcut etiket üzerindeki is özniteliğiyle kullanın: <button is="my-button">Click</button>. Bunun yerine <my-button> yazarsanız bağımsız bir öğe oluşturulur ve yerleşik davranış kaybedilir.

Safari, erişilebilirlik kaygılarını gerekçe göstererek özelleştirilmiş yerleşik öğeleri uygulamayı reddetmiştir. Bunlar Chrome, Edge ve Firefox'ta çalışır; Safari'de özelleştirme özniteliği yok sayılır ve öğe sıradan bir <button> gibi davranır. Safari desteği gerektiğinde resmî çoklu tarayıcı dolgusunu kullanın.

@ungap/custom-elements çoklu tarayıcı dolgusu, Safari'de özelleştirilmiş yerleşik öğe desteğini geri getirir. Küçük ve bakımı iyi yapılan bir dolgudur; ekibiniz özelleştirme özniteliği yaklaşımından vazgeçmeden tarayıcılar arası destek istiyorsa bunu ekleyin.

Çoklu tarayıcı dolgusu olmadan Safari desteği önemliyse bunun yerine bağımsız bir öğe oluşturun ve gereken davranışları kendiniz kopyalayın: düğme rolü ekleyin, odak sırası için 0 değerini verin, Enter/Boşluk için klavye işleyicileri ekleyin ve ElementInternals arayüzüyle form ilişkilendirmesi sağlayın.

Bağımsız öğeler, static formAssociated = true ayarlanarak ve this.attachInternals() kullanılarak form gönderimine katılabilir. Döndürülen ElementInternals nesnesi, tam form bütünleşmesi için setFormValue ve setValidity sağlar.

Çoğunlukla yerleşik bir öğe gibi davranan bileşenler (gelişmiş bir düğme veya akıllı bir giriş alanı) için, platform desteğiniz Chrome/Firefox ise ya da çoklu tarayıcı dolgusunu kabul ediyorsanız özelleştirilmiş yerleşik öğeleri seçin. Tamamen yeni bileşenler (kartlar veya iletişim kutuları) için, yerleşik bir karşılığı yoksa bağımsız öğeleri seçin.

Web bileşenlerinde en yaygın hata, <my-button> öğesini bağımsız bir öğe olarak oluşturmaktır. Bu öğe formları göndermez, Enter/Boşluk tuşlarına tepki vermez ve düğme olarak duyurulmaz. Ya HTMLButtonElement sınıfını genişletin ya da gerçek bir düğmenin tüm davranışlarını dikkatle kopyalayın.

Düğme benzeri bir bileşen için HTMLElement sınıfını (bağımsız öğe) genişletmek yerine HTMLButtonElement sınıfını (özelleştirilmiş yerleşik öğe) genişletmenin pratik avantajı nedir?

Özelleştirilmiş yerleşik öğeler belirli bir HTML sınıfını (HTMLButtonElement, HTMLInputElement) genişletir ve is özniteliğiyle kullanılır; tüm yerel davranışları devralırlar. button sınıfını genişletme seçeneğiyle kaydedin. Safari bunları yerel olarak desteklemez; tam tarayıcılar arası destek gerektiğinde çoklu tarayıcı dolgusu kullanın veya davranışları elle kopyalayan bağımsız öğeleri tercih edin.