Web bileşenleri ile özel öğeler arasındaki fark nedir?

"Web Bileşenleri" ve "Özel öğeler" genellikle karışıktır ve bu sorunun başlığını bulmak için yapılan web aramaları henüz netlik getirmemektedir. Bunu düzeltelim.

Özel öğeler , Gölge DOM, Şablonlar ve HTML içe aktarmalarının yanı sıra Web Bileşenleri standardının bir belirtim parçasıdır .

Spec'ten:

Özel öğeler, yazarların kendi tam özellikli DOM öğelerini oluşturmalarını sağlar. Her ne kadar yazarlar her zaman belgelerinde standart olmayan unsurlar kullanabilseler de, senaryo veya benzeri bir şeyden sonra uygulamaya özel davranış eklenmiş olsa da, bu tür unsurlar tarihsel olarak uyumsuz ve çok işlevsel değildir. Özel bir öğe tanımlayarak, yazarlar ayrıştırıcıya bir öğenin nasıl düzgün bir şekilde oluşturulacağını ve bu sınıftaki öğelerin değişikliklere nasıl tepki vermesi gerektiğini bildirebilir.

Tarih

Spesifikasyon şimdi v1'de . Önceki sürüm, v0, desteklenen olmuştu Chrome 33 beri ve kullanarak farklı bir API vardı document.registerElement- hangi edilir şimdi kaldırılan .

kullanım

Özel öğeler özerk olabilir (sıfırdan yeni bir öğe oluşturma (yani, HTMLElement'i genişletme )) veya mevcut bir HTML öğesini (HTMLButtonElement gibi) özelleştirebilir.

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

customElements.define()Çağrının ikinci parametresi , elemanın davranışını uygulayan sınıfın adıdır. Otonom elemanlar ve özelleştirilmiş yerleşik elemanlar için spesifikasyondaki örneklere bakın .

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

Özel öğeler özgün olarak desteklenir bazı modern tarayıcılarda ve edilebilmektedir polyfilled Safari 7+ ve IE11 için geri gidiş eski tarayıcılar için. Ayrıca bkz . V1 çoklu dolgusu .

Şablonlar ve Gölge DOM

Özel bir öğede Şablonlar ve Gölge DOM kullanarak, öğeyi daha kolay ve yeniden kullanılabilir hale getirebilirsiniz.

Şablonlar, özel öğelerin yapısını bildirmek için HTML kullanılmasına izin verir:

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

Shadow DOM , içeriğin stilleri, kimlikleri ve sınıflarının kendi içinde değerlendirilmesini sağlar. Bu, CSS'nin kanamasını veya özel öğenin iç kısımlarına onun dışından erişmesini önler.

customElements.define('fancy-element', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#fancy-element-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
  ...
});

Daha fazla bilgi edin

Google Developers makaleleri:

• Özel öğeler v1: yeniden kullanılabilir web bileşenleri
• Shadow DOM: bağımsız web bileşenleri