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

Yapılacaklar listesi

Gölge DOM

Özellikler ve özellikler

Etkinlikler

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;
    ...
  }
}