Gaya yang dapat digunakan kembali dan lancar.
Stylesheet yang Dapat Dibangun adalah cara membuat dan mendistribusikan gaya yang dapat digunakan kembali saat menggunakan Shadow DOM.
Membuat stylesheet menggunakan JavaScript dapat dilakukan kapan saja. Namun,
sebelumnya adalah membuat elemen <style>
menggunakan
document.createElement('style')
, lalu akses properti sheetnya untuk mendapatkan
referensi ke layanan dasar
CSSStyleSheet
di instance Compute Engine. Metode ini dapat menghasilkan kode CSS duplikat dan bloat yang menyertainya,
dan tindakan melampirkan menyebabkan flash konten tanpa gaya, baik ada
bloat maupun tidak. Antarmuka CSSStyleSheet
adalah root dari kumpulan CSS
antarmuka representasi yang
disebut sebagai
CSSOM,
menawarkan cara terprogram untuk memanipulasi stylesheet serta menghilangkan
masalah yang terkait
dengan metode lama.
Stylesheet yang dapat disusun memungkinkan untuk menentukan dan menyiapkan CSS bersama gaya, lalu menerapkan gaya itu ke beberapa Akar Bayangan atau Dokumen dengan mudah dan tanpa duplikasi. Pembaruan pada CSSStyleSheet bersama diterapkan ke yang menjadi dasar penerapannya, dan mengadopsi spreadsheet gaya cepat dan sinkron setelah {i>sheet<i} dimuat.
Asosiasi yang disiapkan oleh Constructable Stylesheet sangat cocok untuk
sejumlah aplikasi yang berbeda. Alat ini dapat digunakan untuk menyediakan tema terpusat
digunakan oleh banyak komponen: tema dapat berupa instance CSSStyleSheet
yang diteruskan ke
komponen, dengan pembaruan pada tema yang disebarkan ke komponen
secara otomatis. Dapat digunakan untuk mendistribusikan CSS Kustom
Nilai properti yang akan
subtree DOM tertentu tanpa bergantung pada
jenjang. Bahkan bisa
digunakan sebagai antarmuka langsung ke parser CSS browser, sehingga memudahkan
melakukan pramuat stylesheet tanpa memasukkannya ke dalam DOM.
Membuat stylesheet
Daripada memperkenalkan API baru untuk mencapai hal ini, model Constructable
StyleSheets
spesifikasi memungkinkan pembuatan stylesheet imperatif dengan memanggil
konstruktor CSSStyleSheet()
. Objek CSSStyleSheet yang dihasilkan memiliki dua
metode baru yang lebih aman ketika menambahkan dan
memperbarui aturan stylesheet tanpa
memicu Flash Tanpa Gaya
Konten (FOUC).
Tujuan
replace()
dan
replaceSync()
keduanya akan mengganti stylesheet dengan string CSS, dan replace()
menampilkan Promise. Dalam kedua kasus tersebut, referensi stylesheet eksternal tidak
didukung—aturan @import
apa pun akan diabaikan dan akan menghasilkan peringatan.
const sheet = new CSSStyleSheet();
// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');
// replace all styles:
sheet.replace('a { color: blue; }')
.then(() => {
console.log('Styles replaced');
})
.catch(err => {
console.error('Failed to replace styles:', err);
});
// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."
Menggunakan stylesheet yang dikonstruksi
Fitur baru kedua yang diperkenalkan oleh Constructable StyleSheets adalah
adoptedStyleSheets
properti tersedia di Shadow
Root
dan Dokumen. Ini
memungkinkan kita secara eksplisit menerapkan gaya yang ditentukan oleh CSSStyleSheet
ke DOM tertentu
sub hierarki. Untuk melakukannya, kita tetapkan properti ke sebuah array dari satu atau beberapa stylesheet untuk
diterapkan pada elemen tersebut.
// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');
// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);
// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);
Menggabungkan semuanya
Dengan Constructable StyleSheets, developer web kini memiliki solusi yang jelas untuk membuat CSS StyleSheets dan menerapkannya ke hierarki DOM. Kami memiliki API berbasis Promise baru untuk memuat StyleSheet dari string sumber CSS yang menggunakan parser bawaan browser dan semantik pemuatan. Akhirnya, kami memiliki mekanisme untuk menerapkan pembaruan gaya tampilan pada semua penggunaan {i>StyleSheet<i}, menyederhanakan hal-hal seperti perubahan tema dan preferensi warna.
Rencana ke depan
Versi awal Constructable Stylesheet yang dikirimkan bersama API
dijelaskan di sini, tetapi masih ada upaya yang sedang
dilakukan untuk membuat semuanya lebih mudah digunakan. Ada
proposal untuk memperluas
FrozenArray adoptedStyleSheets
dengan metode khusus untuk menyisipkan dan
menghapus stylesheet, yang akan menghilangkan
kebutuhan kloning {i>array<i} dan menghindari
referensi stylesheet duplikasi yang potensial.