Özel öğeler kendi HTML etiketlerinizi oluşturmanıza olanak tanır. Bu kontrol listesi, yüksek kaliteli öğeler oluşturmanıza yardımcı olacak en iyi uygulamaları kapsar.
Özel öğeler, HTML'yi genişletmenize ve kendi etiketlerinizi tanımlamanıza olanak tanır. Kendisi
son derece güçlü ancak düşük seviyeli özellikler de
en iyi nasıl uygulayacağınızı her zaman net bir şekilde belirleyebilirsiniz.
Bu slaytta, mümkün olan en iyi deneyimleri sunmanıza yardımcı olmak istiyoruz.
yapılacaklar listesi. Bir oyun olmak için gerekli olduğunu düşündüğümüz her şeyi
iyi davranmış özel öğe.
Yapılacaklar listesi
Gölge DOM
Stilleri kapsüllemek için bir gölge kökü oluşturun.
Why?
Stilleri öğenizin gölge kökünde kapsüllemek, öğenin çalışacağından emin olmanızı sağlar.
önemli bir rol oynar. Bu, özellikle bir geliştirici
öğenizi başka bir öğenin gölge kökünün içine yerleştirmek istiyor. Bu
onay kutusu veya radyo düğmesi gibi basit öğeler için bile geçerlidir. Projenin
gölge kökünüzdeki tek içeriğin stiller olacağı ve
.
Oluşturucu, öğeniz hakkında özel bilgiye sahip olduğunuz zamandır.
Başka istemediğiniz bir uygulama
ayrıntıları ayarlamanın tam zamanı.
bir sürü öğe var. Bu işlemi,
connectedCallback, şu açılardan korunmanız gerektiği anlamına gelir:
öğenizin ayrıldığı ve belgeye tekrar eklendiği durumlar.
Öğenin oluşturduğu tüm alt öğeleri gölge köküne yerleştirin.
Why?
Öğeniz tarafından oluşturulan alt öğeler, uygulamanın bir parçasıdır ve
özel. Gölge kökü koruması olmadan, dışındaki JavaScript
istemeden bu çocuklara müdahale ediyor.
<slot> kullanın ışık DOM'si alt öğelerini gölge DOM'nize yansıtmak için
Why?
HTML alt öğeleri bileşeninizi daha derlenebilir hale getirdiğinden bileşeninizin kullanıcılarının bileşeninizde içerik belirtmesine izin verin. Tarayıcı özel öğeleri desteklemediğinde, iç içe yerleştirilmiş içerik kullanılabilir, görünür ve erişilebilir durumda kalır.
:host görüntüleme stili ayarlayın (ör. block,
inline-block, flex) varsayılan olarak
inline.
Why?
Özel öğeler varsayılan olarak display: inline şeklindedir. Bu nedenle,
width veya height işleminin herhangi bir etkisi olmaz. Bu sıklıkla
açısından sürpriz olarak ortaya çıkabilir ve uygulama, geliştirme
düzene sokmak. inline ekranı tercih etmediğiniz sürece
her zaman varsayılan bir display değeri belirlemelidir.
Gizli özelliğe uyan bir :host görüntüleme stili ekleyin.
Why?
Varsayılan display stiline sahip özel bir öğe (ör.
:host { display: block }, düşük kesinliği geçersiz kılar
yerleşik
hidden özelliğine sahip.
hidden ayarlarını yapacağınızı düşünüyorsanız bu durum sizi şaşırtabilir
özelliğini display: none oluşturmak için kullanın. Ayrıca
varsayılan display stiline, hidden desteği eklendi
:host([hidden]) { display: none } ile.
Yazar tarafından belirlenen, genel özellikleri geçersiz kılma.
Why?
Genel özellikler, tüm HTML öğelerinde bulunan özelliklerdir. Biraz
tabindex ve role örnek olarak verilebilir. Özel öğe
ilk tabindex değerini 0 olarak ayarlamak isteyebilir, böylece bu değer klavye olur
odaklanılabilir. Ama her zaman ilk olarak bunu kullanan geliştiricinin
öğeniz bunu başka bir değere ayarlamıştır. Örneğin,
tabindex - -1 arasındaysa bu,
öğesinin etkileşimli olmasını sağlar.
Temel verileri (dizeler, sayılar, booleler) her zaman iki özellik olarak kabul et
özellikler.
Why?
Yerleşik eşdeğerleri gibi özel öğeler yapılandırılabilir olmalıdır.
Yapılandırma; bildirimli, özellikler aracılığıyla veya zorunlu olarak aktarılabilir.
yardımcı olur. İdeal olarak her özelliğin aynı zamanda
olması gerekir.
Temel veri özelliklerini ve özelliklerini senkronize etmeye çalışın,
özelliğini ilişkilendirebilirsiniz. Bunun tersi de geçerlidir.
Why?
Bir kullanıcının öğenizle nasıl etkileşim kuracağını asla bilemezsiniz. Örneğin
JavaScript'te bir özellik ayarlarsanız ve ardından bu değeri okumayı bekleyebilirsiniz
getAttribute() gibi bir API kullanarak. Her özelliğin bir
ve bunların her ikisini de yansıttığından,
bunların hepsini birden yansıtmanızı
öğenizle çalışmasını sağlayacak araçlardır. Başka bir deyişle,
setAttribute('foo', value), dönüşüm izleme için
foo özelliği için geçerlidir ve bunun tersi de geçerlidir. Tabii ki sözleşmenin
tek bir konuşmayla
lütfen unutmayın. Yüksek frekanslı özellikleri (ör.
Bir video oynatıcıda currentTime. Mantıklı davranın. Eğer
kullanıcının bir mülk veya özellikle etkileşimde bulunacağı ve
yansıtması da külfetli değildir, öyledir.
Yalnızca zengin verileri (nesneler, diziler) özellik olarak kabul etmeye çalışın.
Why?
Genel olarak konuşacak olursak,
API'leri kullanarak zengin verileri (düz JavaScript nesneleri ve dizileri) kabul edebilir
özellikleri hakkında daha fazla bilgi edinin. Zengin veriler, bunun yerine yöntem çağrıları veya
özellikler. Zengin verileri olduğu gibi kabul etmenin bazı açık dezavantajları vardır.
özellikleri: Büyük bir nesneyi dizeye dönüştürmek pahalı olabilir ve
bu dizeleştirme işleminde tüm nesne başvuruları kaybolur. Örneğin,
Örneğin, başka bir nesneye başvuruda bulunan bir nesneyi dizelerseniz
bir DOM düğümü kullanıyorsanız bu referanslar kaybolur.
Zengin veri özelliklerini özelliklere yansıtmayın.
Why?
Zengin veri özelliklerini özelliklere yansıtmak çok pahalıya mal olur,
aynı JavaScript nesnelerinin serileştirilmesini ve seri dışı bırakılmasını gerektirir. Aksi hâlde
yalnızca bu özellikle çözülebilecek bir kullanım alanınız varsa,
kaçınmanız önerilir.
Öğeden önce ayarlanmış olabilecek özellikleri kontrol edebilirsiniz.
yeni sürüme geçirildi.
Why?
Öğenizi kullanan bir geliştirici, öğede bir mülk ayarlamayı deneyebilir
yüklenmelidir. Bu, özellikle de
Geliştirici, bileşenleri yükleme işlemini yürüten, bunları damgalayan
özelliklerini bir modele bağlamayı unutmayın.
Durumlarını ifade etmesi gereken öğeler, bunu özellikleri kullanarak yapmalıdır. İlgili içeriği oluşturmak için kullanılan
class özelliğinin, genellikle
kullanan bir geliştiriciye ait olduğunu fark ederseniz
geliştirici dersleri
Etkinlikler
Dahili bileşen etkinliğine yanıt olarak etkinlikleri gönderin.
Why?
Bileşeninizin, devre dışı bırakılmış bir etkinliğe göre değişen özellikleri
yalnızca bileşeniniz bunu bilir. Örneğin, bir zamanlayıcı veya animasyonun
veya kaynağın yüklenmesi biter. Etkinlikleri tek bir yerden
bu değişikliklere yanıt olarak, ana makineye bileşenin durumunun
yardımcı olur.
Ana makinenin bir özellik ayarlamasına yanıt olarak etkinlikleri gönderme (aşağı doğru
veri akışı) için geçerlidir.
Why?
Bir ana makinenin ayarlanmasına yanıt olarak etkinlik göndermek gereksizdir
(ana makine geçerli durumu bilir çünkü az önce ayarlamıştır). Etkinlikleri gönderme
bir mülk ayarına yanıt olarak, veri içeren sonsuz döngülere neden olabilir.
bağlama sistemleri.
Elementinizi kullanan bir geliştirici, bazı durumlarda
durumu hakkında daha fazla bilgi edinin. Örneğin, ARIA role veya odaklanılabilirliği
tabindex. Bunların ve diğer genel özelliklerin ayarlanıp ayarlanmadığını kontrol edin.
göz atmayı unutmayın.
Bir geliştirici, öğenizden önce öğede bir özellik ayarlamaya çalışabilir
tanım yüklendi. Bu, özellikle geliştirici bir
bileşenleri yüklemeyi, bunları sayfaya yerleştirmeyi ve
özelliklerini bir modele bağlamayı içerir.
Aşağıdaki örnekte Angular, modelinin
isChecked özelliğini onay kutusunun checked özelliğine ekleyin. Projenin tanımı
"nasıl yapılır?" onay kutusu geç yüklendi. Angular,
kontrol edilen mülk yeni sürüme geçirilmeden önce.
Özel bir öğe, bu senaryoya uygun bir mülk olup olmadığını kontrol ederek
örneğinde zaten ayarlanmış. <howto-checkbox>
bu modeli _upgradeProperty() adlı bir yöntem kullanarak gösterir.
_upgradeProperty(), yeni sürüme geçirilmemiş örnekteki değeri yakalar ve siler
özel öğenin kendi özellik belirleyicisini gölgelendirmemesi için özelliği etkinleştirin.
Bu şekilde, öğenin tanımı sonunda yüklendiği zaman
doğru durumu yansıtmalıdır.
Yeniden katılma sorunlarını önleme
Durumu bir kampanyaya yansıtmak için attributeChangedCallback() kullanmak
temel bir mülktür, örneğin:
// When the [checked] attribute changes, set the checked property to match.attributeChangedCallback(name,oldValue,newValue){if(name==='checked')this.checked=newValue;}
Ancak, özellik belirleyici aynı zamanda reklam döngüsüne
belirtir.
setchecked(value){constisChecked=Boolean(value);if(isChecked)// OOPS! This will cause an infinite loop because it triggers the// attributeChangedCallback() which then sets this property again.this.setAttribute('checked','');elsethis.removeAttribute('checked');}
Alternatif bir yöntem de, özellik belirleyicinin özelliğe yansıtmasına izin vermektir.
alıcının değeri özelliğe göre belirlemesini sağlar.
Bu örnekte, özellik eklendiğinde veya kaldırıldığında özellik de ayarlanır.
Son olarak, attributeChangedCallback() yan efektleri yönetmek için kullanılabilir
ARIA eyaletlerinin uygulanması gibi.
attributeChangedCallback(name,oldValue,newValue){consthasValue=newValue!==null;switch(name){case'checked':// Note the attributeChangedCallback is only handling the *side effects*// of setting the attribute.this.setAttribute('aria-checked',hasValue);break;...}}
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2017-08-14 UTC."],[],[]]