Meydan okuma - Custom element

Custom elements ve shadow DOM ile bileşen yapısı yazarsın.

Custom element

Bu meydan okumada bir custom element yazacaksın: <bookmark-card> etiketi. Önce HTMLElement'i türeten bir sınıf tanımlarsın.

Sınıfı kaydetmek için customElements.define('bookmark-card', BookmarkCard) çağırırsın. İlk argüman etiket adıdır ve bir tire içermelidir.

Yaşam döngüsü callback'lerinden connectedCallback, element belgeye bağlandığında tetiklenir. Burada this.attachShadow({ mode: 'open' }) ile bir shadow root açar ve içeriği içine yazarız; böylece stiller dışarı sızmaz.

Shadow DOM ve yaşam döngüsü

Bir custom element'in içeriğini dışarından izole etmek için shadow DOM kullanırsın. this.attachShadow({ mode: 'open' }) elemente bir shadow root bağlar.

Dönen shadow root'un innerHTML'ine HTML yazarsın; bu içerik dış belgeden ayrı kalır ve stilleri etkilemez.

connectedCallback yaşam döngüsü callback'idir: element DOM'a her eklendiğinde çağrılır. Burada shadow root açmak ve içeriği yazmak en sık kullanılan kalıptır.

Uygulama BookmarkCard elementini yaz

Bir BookmarkCard sınıfı yaz: HTMLElement'i türetir ve connectedCallback yöntemi içerir. Bu yöntemde this.attachShadow({ mode: 'open' }) ile shadow root aç ve innerHTML'ine bir paragraf yaz. Sonra customElements.define('bookmark-card', BookmarkCard) ile kaydet.

Örnek çözümü göster

'open' }) çağır ve shadow.innerHTML ata. En sona customElements.define('bookmark-card', BookmarkCard); yaz.

Örnek çözüm:
class BookmarkCard extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = '<p>Yer imi</p>';
  }
}
customElements.define('bookmark-card', BookmarkCard);

Kendini test et

Bir custom element nasıl kaydedilir?
```
customElements.define('bookmark-card', BookmarkCard);
```
- document.registerElement
- customElements.define
- window.defineElement
- HTMLElement.register
Cevabı göster

customElements.define — Doğru! customElements.define etiket adını ve sınıfı alır.

Elementi kaydet

class BookmarkCard extends HTMLElement {
  constructor() {
    super();
  }
}
____;

Cevabı göster

class BookmarkCard extends HTMLElement {
  constructor() {
    super();
  }
}
customElements.define('bookmark-card', BookmarkCard);

Sıradaki ders: İleri seviye bölüm sınavı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler