Özel Öğelerle İlgili En İyi Uygulamalar

Ö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.

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 .
Örnek <howto-checkbox> öğesi.

Oluşturucuda gölge kökünüzü oluşturun.

Why? 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.
Örnek <howto-checkbox> öğesi.

Öğ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.
Örnek <howto-tabs> öğesi.

<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.
Örnek <howto-tabs> öğesi.

: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.
Örnek <howto-checkbox> öğesi.

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.
Örnek <howto-checkbox> öğesi.

Özellikler ve özellikler

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.
Örnek <howto-checkbox> öğesi. Bu konu Sayfanın yazarını geçersiz kılma.

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.
Örnek <howto-checkbox> öğesi.

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.
Örnek <howto-checkbox> öğesi. Bu konu Yeniden katılmayla ilgili sorunlardan kaçının.

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.
Örnek <howto-checkbox> öğesi. Daha ayrıntılı açıklama: Mülkleri tembel hale getirin.

Sınıfları kendiniz uygulamayın.

Why? 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.
Örnek <howto-checkbox> öğesi.

Açıklamalar

Sayfanın yazarını geçersiz kılma

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.

connectedCallback() {
  if (!this.hasAttribute('role'))
    this.setAttribute('role', 'checkbox');
  if (!this.hasAttribute('tabindex'))
    this.setAttribute('tabindex', 0);

Mülkleri tembel yapma

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.

<howto-checkbox [checked]="defaults.isChecked"></howto-checkbox>

Ö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.

connectedCallback() {
  ...
  this._upgradeProperty('checked');
}

_upgradeProperty(prop) {
  if (this.hasOwnProperty(prop)) {
    let value = this[prop];
    delete this[prop];
    this[prop] = value;
  }
}

_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.

set checked(value) {
  const isChecked = 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', '');
  else
    this.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.

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

get checked() {
  return this.hasAttribute('checked');
}

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) {
  const hasValue = 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;
    ...
  }
}