Apa perbedaan antara komponen web dan elemen khusus?

"Komponen Web" dan "Elemen khusus" sering campur aduk, dan pencarian web untuk judul pertanyaan ini belum menghasilkan banyak kejelasan. Mari kita perbaiki itu.

Elemen khusus adalah bagian spesifikasi standar Komponen Web , bersama dengan Shadow DOM, Templat, dan impor HTML.

Dari spec:

Elemen khusus menyediakan cara bagi penulis untuk membangun elemen DOM mereka yang berfitur lengkap. Meskipun penulis selalu dapat menggunakan elemen non-standar dalam dokumen mereka, dengan perilaku spesifik aplikasi ditambahkan setelah fakta dengan skrip atau serupa, elemen tersebut secara historis tidak sesuai dan tidak terlalu fungsional. Dengan mendefinisikan elemen kustom, penulis dapat menginformasikan parser bagaimana membangun elemen dengan benar dan bagaimana elemen kelas itu harus bereaksi terhadap perubahan.

Sejarah

Spesifikasi sekarang di v1 . Versi sebelumnya, v0, telah didukung sejak Chrome 33 , dan memiliki API yang berbeda, menggunakan document.registerElement- yang adalah sekarang usang .

Pemakaian

Elemen khusus dapat berupa otonom (membuat elemen baru dari awal (yaitu, memperluas HTMLElement ), atau dapat menyesuaikan elemen HTML yang ada (seperti HTMLButtonElement).

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

Parameter kedua untuk customElements.define()panggilan adalah nama kelas yang menerapkan perilaku elemen. Lihat contoh dalam spesifikasi untuk elemen otonom dan untuk elemen bawaan yang dapat disesuaikan .

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

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

Elemen khusus didukung secara native di beberapa browser modern , dan dapat di- polyfill untuk browser lama yang kembali ke Safari 7+ dan IE11. Lihat juga polyfill v1 .

Template dan Shadow DOM

Dengan menggunakan Templat dan Bayangan DOM dalam elemen khusus, Anda dapat membuat elemen lebih mudah ditangani dan dapat digunakan kembali.

Kerangka memungkinkan menggunakan HTML untuk mendeklarasikan struktur elemen khusus:

<!-- 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 memungkinkan gaya, id, dan kelas konten untuk dicakup sendiri. Ini mencegah pendarahan CSS atau akses ke internal elemen kustom dari luarnya.

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

Belajarlah lagi

Artikel Google Developers :

• Elemen khusus v1: komponen web yang dapat digunakan kembali
• Shadow DOM: komponen web mandiri