Stylesheet yang dapat dibangun

Gaya yang dapat digunakan kembali dengan lancar.

Jason Miller

Constructable Stylesheets adalah cara untuk membuat dan mendistribusikan gaya yang dapat digunakan kembali saat menggunakan Shadow DOM.

Browser Support

• 73
• 79
• 101
• 16.4

Source

Membuat stylesheet menggunakan JavaScript selalu memungkinkan. Namun, prosesnya secara historis adalah membuat elemen <style> menggunakan document.createElement('style'), lalu mengakses properti sheet-nya untuk mendapatkan referensi ke instance CSSStyleSheet yang mendasarinya. Metode ini dapat menghasilkan kode CSS duplikat dan bloatware yang menyertainya, dan tindakan melampirkan menyebabkan flash konten tanpa gaya, baik ada bloatware atau tidak. Antarmuka CSSStyleSheet adalah root dari kumpulan antarmuka representasi CSS yang disebut sebagai CSSOM, yang menawarkan cara terprogram untuk memanipulasi stylesheet serta menghilangkan masalah yang terkait dengan metode lama.

Constructable Stylesheet memungkinkan Anda menentukan dan menyiapkan gaya CSS bersama, lalu menerapkan gaya tersebut ke beberapa Shadow Root atau Dokumen dengan mudah dan tanpa duplikasi. Update pada CSSStyleSheet bersama diterapkan ke semua root tempat CSSStyleSheet tersebut diadopsi, dan mengadopsi stylesheet cepat dan sinkron setelah sheet dimuat.

Pengaitan yang disiapkan oleh Constructable Stylesheet cocok untuk sejumlah aplikasi yang berbeda. Ini dapat digunakan untuk menyediakan tema terpusat yang digunakan oleh banyak komponen: tema dapat berupa instance CSSStyleSheet yang diteruskan ke komponen, dengan update pada tema yang disebarkan ke komponen secara otomatis. API ini dapat digunakan untuk mendistribusikan nilai Properti Kustom CSS ke subhierarki DOM tertentu tanpa mengandalkan cascade. API ini bahkan dapat digunakan sebagai antarmuka langsung ke parser CSS browser, sehingga memudahkan pemuatan stylesheet tanpa memasukkannya ke dalam DOM.

Membuat stylesheet

Daripada memperkenalkan API baru untuk melakukannya, spesifikasi Constructable StyleSheets memungkinkan pembuatan stylesheet secara imperatif dengan memanggil konstruktor CSSStyleSheet(). Objek CSSStyleSheet yang dihasilkan memiliki dua metode baru yang membuatnya lebih aman untuk menambahkan dan memperbarui aturan stylesheet tanpa memicu Flash of Unstyled Content (FOUC). Metode replace() dan replaceSync() 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..."

Pada versi spesifikasi sebelumnya, replace() mengizinkan aturan @import dan menampilkan Promise yang diselesaikan saat aturan ini selesai dimuat. Mulai Chrome 84, fitur ini dihapus dari spesifikasi dan aturan @import diabaikan dengan peringatan mulai Chrome 84.

Menggunakan stylesheet yang dibuat

Fitur baru kedua yang diperkenalkan oleh Constructable StyleSheets adalah properti adoptedStyleSheets yang tersedia di Shadow Roots dan Dokumen. Hal ini memungkinkan kita menerapkan gaya yang ditentukan oleh CSSStyleSheet secara eksplisit ke subhierarki DOM tertentu. Untuk melakukannya, kita menetapkan properti ke array yang berisi satu atau beberapa stylesheet untuk diterapkan ke 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);

Dalam versi spesifikasi sebelumnya, adoptedStyleSheets diimplementasikan sebagai array yang dibekukan, yang berarti mutasi di tempat seperti push() menampilkan pengecualian. Menambahkan stylesheet baru memerlukan penentuan ulang array: `document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet] Hal ini tidak lagi berlaku karena spesifikasi telah diperbarui untuk memungkinkan mutasi array.

Menggabungkan semuanya

Dengan Constructable StyleSheets, developer web kini memiliki solusi eksplisit 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. Terakhir, kami memiliki mekanisme untuk menerapkan update stylesheet ke semua penggunaan StyleSheet, sehingga menyederhanakan hal-hal seperti perubahan tema dan preferensi warna.

Lihat Demo

Rencana ke depan

Versi awal Constructable Stylesheets yang dikirimkan dengan API yang dijelaskan di sini, tetapi ada upaya yang sedang dilakukan untuk membuatnya lebih mudah digunakan. Ada proposal untuk memperluas adoptedStyleSheets FrozenArray dengan metode khusus untuk menyisipkan dan menghapus stylesheet, yang akan menghilangkan kebutuhan akan cloning array dan menghindari potensi referensi stylesheet duplikat.

Informasi selengkapnya

• Status Platform Chrome
• Contoh
• API
• Penjelasan
• Rencana Penerapan
• Intent to Ship
• Discourse