Çözüldü DOM'a etki eden component yapımı

533388 · 12 Aralık 2023

Mesela bir counter App örneği atabilir misiniz ya da mantığını anlatır mısınız? Ama component yapısında olacak şekilde.
@kaan.w hocam siz yardımcı olmuştunuz, müsait olunca bir daha bakabilir misiniz acaba?

kaan.w · 12 Aralık 2023

Bu şekilde yaptım.

JavaScript:

class Counter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" });
    const text = this.shadowRoot.appendChild(document.createElement("p"));
    const button = this.shadowRoot.appendChild(document.createElement("button"));
    text.textContent = 0;
    button.textContent = "add";
    button.addEventListener("click", () => {
      text.textContent = Number(text.textContent) + 1;
    });
  }
}
customElements.define("number-counter", Counter);

HTML:

<number-counter></number-counter>

Burayı okumanı tavsiye ederim.

Web components

javascript.info

kaan.w · 12 Aralık 2023

Bu şekilde yaptım.

JavaScript:

class Counter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" });
    const text = this.shadowRoot.appendChild(document.createElement("p"));
    const button = this.shadowRoot.appendChild(document.createElement("button"));
    text.textContent = 0;
    button.textContent = "add";
    button.addEventListener("click", () => {
      text.textContent = Number(text.textContent) + 1;
    });
  }
}
customElements.define("number-counter", Counter);

HTML:

<number-counter></number-counter>

Burayı okumanı tavsiye ederim.

Web components

javascript.info

533388 · 12 Aralık 2023

kaan.w dedi:

Bu şekilde yaptım.

JavaScript:

class Counter extends HTMLElement {
 connectedCallback() {
 this.attachShadow({ mode: "open" });
 const text = this.shadowRoot.appendChild(document.createElement("p"));
 const button = this.shadowRoot.appendChild(document.createElement("button"));
 text.textContent = 0;
 button.textContent = "add";
 button.addEventListener("click", () => {
 text.textContent = Number(text.textContent) + 1;
 });
 }
}
customElements.define("number-counter", Counter);

HTML:

<number-counter></number-counter>

Heh hocam ben siz yazmadan önce birkaç video izledim de birkaç soru oluştu kafamda.
İnternette Shadow dom ile ilgi araştırma yaptım ve body içinde oluşturduğumuz elementlerin bir Shadow host ve hostun içinde de elementler olduğunu ve bunlarım Shadow root içinde yer aldığını anladım, doğru mudur? Değilse nedir?

kaan.w dedi:
This. Attachshadow({ mode: "open" });

Bu kodun amacı oluşturduğumuz elementi shadowroot ağacı altına eklemek için istek göndermek mi? Eğer closed olursa null değer mi dönüyor?

kaan.w · 12 Aralık 2023

533388 dedi:
Bu kodun amacı oluşturduğumuz elementi shadowroot ağacı altına eklemek için istek göndermek mi? Eğer closed olursa null değer mi dönüyor?

Evet.

533388 · 12 Aralık 2023

kaan.w dedi:
Evet.

Teşekkür ederim. Bir de bu JS in biraz ileride konusu mu daha once hiçbir egitimde web component gormemistim de. Ve biraz zorlayici geldi ne yalani söyleyeyim.

kaan.w · 12 Aralık 2023

533388 dedi:
Teşekkür ederim. Bir de bu JS in biraz ileride konusu mu daha once hiçbir egitimde web component gormemistim de. Ve biraz zorlayici geldi ne yalani söyleyeyim.

Bilmiyorum, bende bu zamana kadar kullanmadım sadece duymuştum.

533388 · 12 Aralık 2023

kaan.w dedi:
Bilmiyorum, bende bu zamana kadar kullanmadım sadece duymuştum.

Peki cok derinlemesine ogrenmesem. Bir şey kaybeder miyim?

kaan.w · 12 Aralık 2023

533388 dedi:
Peki cok derinlemesine ogrenmesem. Bir şey kaybeder miyim?

Hayır.

533388 · 12 Aralık 2023

kaan.w dedi:
Hayır.

Teşekkür ederim sizi de yordum kusura bakmayin lutfen.

diocletian · 13 Aralık 2023

@kaan.w konuşmadaki netliği beni bitirdi

Çözüldü DOM'a etki eden component yapımı

Ayrıntılı düzenleme

533388

Hectopat

kaan.w

Web components

kaan.w

Megapat

Web components

533388

Hectopat

kaan.w

Megapat

533388

Hectopat

kaan.w

Megapat

533388

Hectopat

kaan.w

Megapat

533388

Hectopat

diocletian

Decapat

Benzer konular