Web Components

Web Components adalah kumpulan fitur teknologi yang memungkinkan Anda membuat elemen khusus yang dapat digunakan kembali dengan fungsionalitasnya yang dikemas jauh dari sisa kode Anda dan menggunakannya di aplikasi web Anda.

Konsep dan penggunaan

Sebagai pengembang, kita semua tahu bahwa menggunakan kembali kode sebanyak mungkin merupakan ide yang bagus. Hal ini biasanya tidak mudah untuk struktur markup kustom memikirkan HTML kompleks (serta gaya dan skrip terkait) yang terkadang harus Anda tulis untuk memnuat kontrol UI khusus, dan bagaimana menggunakannya beberapa kali dapat mengubah halaman Anda menjadi berantankan jika Anda tidak berhati-hati.

Web Components bertujun untuk menyelesaikan masalah yang terdiri dari tiga teknologi utama, yang dapat digunakan bersama untuk membuat elemen kustom serbaguna dengan fungsionalitas terenkapsulasi yang dapat digunakan kembali di mana pun Anda suka tanpa takut benturan kode.

  • Custom elements: Sekumpulan API JavaScript yang memungkinkan Anda menentukan custom element dan perilakunya, yang kemudian dapat digunakan sesuai keinginan di antarmuka pengguna Anda.
  • Shadow DOM: Sekumpulan API JavaScript untuk melampirkan pohon DOM "bayangan" yang dienkapsulasi ke elemen yang dirender secara terpisah dari dokumen utama DOM dan mengontrol fungsionalitas terkait. Dengan cara ini, Anda dapat membuat fitur elemen tetap bersifat pribadi, sehingga fitur tersebut dapat ditulis dan diberi gaya tanpa takut bertabrakan dengan bagian lain dari dokumen.
  • HTML templates: Elemen <template> dan <slot> memungkinkan Anda menulis template markup yang tidak ditampilkan di halaman yang dirender. Ini kemudian dapat digunakan kembali beberapa kali sebagai dasar struktur elemen kustom.

Pendekatan dasar untuk mengimplementasikan web component biasanya terlihat seperti ini:

  1. Buat kelas di mana Anda menentukan fungsionalitas web component Anda, menggunakan sintaks kelas ECMAScript 2015 (lihat Kelas untuk informasi lebih lanjut).
  2. Daftarkan elemen kustom baru Anda menggunakan metode CustomElementRegistry.define (), meneruskan nama elemen yang akan ditentukan, kelas atau fungsi di mana fungsionalitasnya ditentukan, dan secara opsional, elemen apa yang diwarisi dari.
  3. Jika perlu, lampirkan shadow DOM ke elemen khusus menggunakan metode Element.attachShadow (). Tambahkan child element, event listener, dll., Ke shadow DOM menggunakan metode DOM biasa.
  4. Jika perlu, tentukan template HTML menggunakan <template> dan <slot>. Sekali lagi gunakan metode DOM biasa untuk mengkloning template dan melampirkannya ke shadow DOM Anda.
  5. Gunakan elemen kustom Anda di mana pun Anda suka di halaman Anda, seperti yang Anda lakukan pada elemen HTML biasa.

Tutorial

Menggunakan custom element
Panduan yang menunjukkan cara menggunakan fitur elemen khusus untuk membuat komponen web sederhana, serta melihat callback siklus proses dan beberapa fitur lanjutan lainnya.
Menggunakan shadow DOM
Panduan yang mempelajari dasar-dasar shadow DOM, menunjukkan cara melampirkan shadow DOM ke elemen, menambahkan ke shadow DOM tree, menatanya, dan banyak lagi.
Menggunakan templates and slots
Panduan yang menunjukkan cara menentukan struktur HTML yang dapat digunakan kembali menggunakan elemen <template> dan <slot>, lalu menggunakan struktur tersebut di dalam komponen web Anda.

Referensi

Custom elements

CustomElementRegistry
Berisi fungsionalitas yang terkait dengan elemen kustom, terutama metode CustomElementRegistry.define() yang digunakan untuk mendaftarkan elemen kustom baru sehingga dapat digunakan di dokumen Anda.
Window.customElements
Mengembalikan referensi ke objek CustomElementRegistry.define().
Life cycle callbacks
Fungsi panggilan balik khusus yang ditentukan di dalam definisi kelas elemen khusus, yang memengaruhi perilakunya:
  • connectedCallback: Dipanggil saat elemen khusus pertama kali dihubungkan ke DOM dokumen.
  • disconnectedCallback: Dipanggil ketika elemen khusus terputus dari DOM dokumen.
  • adoptedCallback: Dipanggil ketika elemen kustom dipindahkan ke dokumen baru.
  • attributeChangedCallback: Dipanggil ketika salah satu atribut elemen khusus ditambahkan, dihapus, atau diubah.
Ekstensi untuk membuat elemen bawaan khusus
  • Atribut HTML global is: Memungkinkan Anda menentukan bahwa elemen HTML standar harus berperilaku seperti elemen bawaan khusus terdaftar.
  • Opsi "is" dari metode Document.createElement(): Memungkinkan Anda membuat instance elemen HTML standar yang berperilaku seperti elemen bawaan khusus terdaftar yang diberikan.
CSS pseudo-classes
Pseudo-classes yang berkaitan secara khusus dengan elemen khusus:
  • :defined: Mencocokkan elemen apa pun yang ditentukan, termasuk elemen bawaan dan elemen khusus yang ditentukan dengan CustomElementRegistry.define()).
  • :host: Memilih shadow host dari shadow DOM yang berisi CSS yang digunakan di dalamnya.
  • :host(): Memilih shadow host dari shadow DOM yang berisi CSS yang digunakan di dalamnya (sehingga Anda dapat memilih elemen khusus dari dalam shadow DOM-nya) tetapi hanya jika pemilih yang diberikan sebagai parameter fungsi cocok dengan shadow host.
  • :host-context(): Memilih shadow host dari shadow DOM yang berisi CSS yang digunakan di dalamnya (sehingga Anda dapat memilih elemen khusus dari dalam shadow DOM-nya) tetapi hanya jika pemilih yang diberikan sebagai parameter fungsi cocok dengan leluhur host bayangan di tempat itu itu berada di dalam hierarki DOM.
Pseudo-elements yang berkaitan secara khusus dengan elemen khusus:

Shadow DOM

ShadowRoot
Merepresentasikan root node dari shadow DOM subtree.
DocumentOrShadowRoot
Fitur penentu mixin yang tersedia di seluruh dokumen dan shadow roots.
Ekstensi Element
Ekstensi ke antarmuka Element yang terkait dengan shadow DOM:
  • Metode Element.attachShadow () melampirkan shadow DOM tree ke elemen yang ditentukan.
  • Properti Element.shadowRoot mengembalikan shadow root yang dilampirkan ke elemen yang ditentukan, atau null jika tidak ada shadow root yang terpasang.
Penambahan Node yang relevan
Penambahan antarmuka Node yang relevan dengan shadow DOM:
  • Metode Node.getRootNode () mengembalikan root objek konteks, yang secara opsional menyertakan shadow root jika tersedia.
  • Properti Node.isConnected mengembalikan boolean yang menunjukkan apakah Node terhubung (langsung atau tidak langsung) ke objek konteks atau tidak, misalnya objek Document dalam kasus DOM normal, atau ShadowRoot untuk shadow DOM.
Ekstensi Event
Ekstensi ke antarmuka Event yang terkait dengan shadow DOM:
  • Event.composed: Mengembalikan Boolean yang menunjukkan apakah acara akan menyebar melintasi batas shadow DOM ke DOM standar (true), atau tidak (false).
  • Event.composedPath: Mengembalikan event's path (objek tempat pemroses akan dipanggil). Ini tidak termasuk node dalam shadow tree jika shadow root dibuat dengan ShadowRoot.mode ditutup.

HTML templates

<template>
Berisi fragmen HTML yang tidak dirender saat dokumen penampung awalnya dimuat, tetapi dapat ditampilkan saat runtime menggunakan JavaScript, terutama digunakan sebagai dasar struktur elemen khusus. Antarmuka DOM terkait adalah HTMLTemplateElement.
<slot>
Placeholder di dalam web component yang dapat Anda isi dengan markup Anda sendiri, yang memungkinkan Anda membuat DOM tree terpisah dan menyajikannya bersama-sama. Antarmuka DOM terkait adalah HTMLSlotElement
Atribut HTML global slot
Menetapkan slot di shadow tree shadow DOM ke sebuah elemen.
Slotable
Mixin yang diimplementasikan oleh node Element dan Text, mendefinisikan fitur yang memungkinkan mereka menjadi konten elemen <slot>. Mixin mendefinisikan satu atribut, Slotable.assignedSlot, yang mengembalikan referensi ke slot tempat node disisipkan.
Ekstensi Element
Extensions ke antarmuka Element yang terkait dengan slot:
  • Element.slot: Mengembalikan nama slot shadow DOM yang dilampirkan ke elemen.
CSS pseudo-elements
Pseudo-elements yang berkaitan secara khusus dengan slot:
  • ::slotted: Mencocokkan konten apa pun yang dimasukkan ke dalam slot.
Event slotchange
Diaktifkan pada instance HTMLSlotElement (elemen <slot>) saat node yang ada di slot itu berubah.

Contoh

Kami sedang membangun sejumlah contoh dalam repo GitHub contoh komponen web kami. Lebih banyak akan ditambahkan seiring berjalannya waktu.

Spesifikasi

Spesifikasi Status Komentar
HTML Living Standard
The definition of '<template> element' in that specification.
Living Standard Definisi dari <template>.
HTML Living Standard
The definition of 'custom elements' in that specification.
Living Standard Definisi dari HTML Custom Elements.
DOM
The definition of 'shadow trees' in that specification.
Living Standard Definisi dari Shadow DOM.
HTML Imports Working Draft Definisi Impor HTML awal.
Shadow DOM Obsolete Definisi Shadow DOM awal.

Kompabilitas browser

Umumnya:

  • Komponen web didukung secara default di Firefox (versi 63), Chrome, dan Opera.
  • Safari mendukung sejumlah fitur komponen web, tetapi kurang dari browser di atas.
  • Edge sedang berada implementasi pengerjaan.

Untuk dukungan browser mendetail dari fitur tertentu, Anda harus membaca halaman referensi yang tercantum di atas.

Lihat juga

  • webcomponents.org situs yang menampilkan contoh komponen web, tutorial, dan informasi lainnya.
  • DataFormsJS Pustaka web component terbuka — Kumpulan Web Component yang dapat digunakan untuk membangun Single Page Apps(SPA), Menampilkan data JSON dari API dan Web service, dan mengikat data ke berbagai elemen di layar. Semua Web Component adalah JavaScript biasa dan tidak memerlukan proses pembuatan.
  • FAST adalah pustaka komponen web yang dibangun oleh Microsoft yang menawarkan beberapa paket untuk dimanfaatkan tergantung pada kebutuhan proyek Anda. Fast Element adalah cara yang ringan untuk dengan mudah membangun Web Component yang berkinerja, hemat memori, dan memenuhi standar. Fast Foundation adalah pustaka kelas WebComponent, templat, dan utilitas lain yang dibangun di atas elemen cepat yang dimaksudkan untuk disusun menjadi Web Component terdaftar.
  • Hybrids Pustaka web component sumber terbuka, yang mendukung objek biasa dan fungsi murni di atas class dan sintaks this. Ini menyediakan API sederhana dan fungsional untuk membuat elemen khusus.
  • Polymer framework web component Google, satu set polyfill, penyempurnaan, dan contoh. Saat ini cara termudah untuk menggunakan komponen web lintas browser.
  • Snuggsi Web Component Mudah dalam ~ 1kB Termasuk polyfill - Yang Anda butuhkan hanyalah browser dan pemahaman dasar tentang kelas HTML, CSS, dan JavaScript agar produktif.
  • Slim.js Pustaka web component sumber terbuka, pustaka berkinerja tinggi untuk pembuatan komponen yang cepat dan mudah; dapat diperluas dan pluggable dan kompatibel cross-framwork.
  • Stencil — TToolchain untuk membangun sistem desain yang dapat digunakan kembali dan terukur dalam web component.