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);