Gaya yang dapat digunakan kembali dan lancar.
Constructable Stylesheet adalah cara untuk membuat dan mendistribusikan gaya yang dapat digunakan kembali saat menggunakan Shadow DOM.
Membuat stylesheet menggunakan JavaScript selalu dapat dilakukan. Namun,
sebenarnya, proses pembuatan elemen <style>
menggunakan
document.createElement('style')
, lalu mengakses properti sheetnya untuk mendapatkan
referensi ke instance
CSSStyleSheet
yang mendasarinya. Metode ini dapat menghasilkan kode CSS duplikat dan gelembung yang menyertainya, dan tindakan melampirkannya menyebabkan flash konten tanpa gaya, baik ada yang menggelembung maupun tidak. Antarmuka CSSStyleSheet
adalah root dari kumpulan antarmuka
representasi CSS yang disebut
CSSOM,
yang menawarkan cara terprogram untuk memanipulasi stylesheet serta menghilangkan
masalah yang terkait dengan metode lama.
Stylesheet yang dapat dibangun memungkinkan penentuan dan penyiapan gaya CSS bersama, lalu menerapkan gaya tersebut ke beberapa Root Bayangan atau Dokumen dengan mudah dan tanpa duplikasi. Pembaruan pada CSSStyleSheet bersama diterapkan ke semua root yang diadopsinya, dan pengadopsian stylesheet dilakukan dengan cepat dan sinkron setelah sheet dimuat.
Pengaitan yang disiapkan oleh Constructable Stylesheet cocok untuk berbagai aplikasi. Atribut 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 diterapkan ke komponen
secara otomatis. Fungsi ini dapat digunakan untuk mendistribusikan nilai Properti Kustom CSS ke subhierarki DOM tertentu tanpa mengandalkan jenjang. Class ini bahkan
dapat digunakan sebagai antarmuka langsung ke parser CSS browser, sehingga memudahkan
pramuat 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()
menggantikan 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 properti
adoptedStyleSheets
yang tersedia di Shadow
Roots
dan Documents. Hal ini memungkinkan kita secara eksplisit menerapkan gaya yang ditentukan oleh CSSStyleSheet
ke subhierarki DOM tertentu. Untuk melakukannya, kita tetapkan properti ke array yang terdiri dari satu atau beberapa stylesheet yang akan 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);
Putting it all together
With Constructable StyleSheets, web developers now have an explicit solution for
creating CSS StyleSheets and applying them to DOM trees. We have a new
Promise-based API for loading StyleSheets from a string of CSS source that uses
the browser's built-in parser and loading semantics. Finally, we have a
mechanism for applying stylesheet updates to all usages of a StyleSheet,
simplifying things like theme changes and color preferences.
Looking ahead
The initial version of Constructable Stylesheets shipped with the API
described here, but there's work underway to make things easier to use. There's
a proposal to extend
the adoptedStyleSheets
FrozenArray with dedicated methods for inserting and
removing stylesheets, which would obviate the need for array cloning and avoid
potential duplicate stylesheet references.
More information