Stylesheet yang Dapat Dibangun

Gaya mulus yang dapat digunakan kembali.

Jason Miller

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

Dukungan Browser

  • 73
  • 79
  • 101
  • 16,4

Sumber

Anda dapat membuat stylesheet menggunakan JavaScript. Namun, secara historis prosesnya adalah membuat 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 penggelembungannya, dan tindakan melampirkannya mengarah ke kilatan konten yang tidak ditata gayanya, baik itu menggelembung 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.

Diagram yang menunjukkan persiapan dan penerapan CSS.

Dengan Stylesheet yang dapat dibangun, Anda dapat menentukan dan menyiapkan gaya CSS bersama, lalu menerapkan gaya tersebut ke beberapa Shadow Root atau Dokumen dengan mudah dan tanpa duplikasi. Pembaruan pada CSSStyleSheet bersama diterapkan ke semua root tempat CSSStyleSheet tersebut diadopsi, dan pengadopsian stylesheet dapat dilakukan dengan cepat dan sinkron setelah sheet dimuat.

Pengaitan yang disiapkan oleh Constructable Stylesheet cocok dengan sejumlah aplikasi yang berbeda. Tema 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. Atribut ini dapat digunakan untuk mendistribusikan nilai Properti Kustom CSS ke subhierarki DOM tertentu tanpa mengandalkan cascade. Class ini bahkan dapat digunakan sebagai antarmuka langsung ke parser CSS browser, sehingga memudahkan pramuat stylesheet tanpa memasukkannya ke dalam DOM.

Membuat stylesheet

Daripada menggunakan API baru untuk mencapai hal ini, spesifikasi Constructable StyleSheets memungkinkan Anda membuat 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..."

Menggunakan stylesheet yang dibuat

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 menetapkan properti ke array dari 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);

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.

View Demo

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