Bagaimanakah Saya Boleh Mengatasi Gaya dalam Elemen Shadow-Root?

Gaya Mengatasi dalam Elemen Akar Bayang

Salah satu ciri utama Shadow DOM ialah pengasingan gayanya. Ini menghalang peraturan CSS luaran daripada menjejaskan elemen dalam akar bayang, memastikan pengkapsulan dan modulariti. Walau bagaimanapun, ia juga memberikan cabaran apabila anda perlu mengatasi gaya yang ditakrifkan dalam akar bayang.

Isunya

Mengikut pertanyaan anda, anda cuba menulis ganti Sifat CSS ditakrifkan dalam elemen akar bayang, khususnya dalam kelas bernama .the-class-name. Walau bagaimanapun, anda tidak dapat mencapai ini tanpa memanipulasi secara langsung gaya akar bayangan dalam alatan pembangunan.

Masalahnya

Kaedah tradisional untuk mengatasi peraturan CSS, seperti menggunakan peraturan CSS global atau :pemilih hos, tidak berfungsi dengan elemen berakar bayang kerana pengasingannya. Shadow DOM menghalang peraturan CSS global daripada bocor ke dalam skopnya dan :pemilih hos hanya digunakan pada elemen yang mengehos akar bayang, bukan pada elemen dalam akar bayang.

Penyelesaian

Nasib baik, terdapat penyelesaian yang membolehkan anda menyuntik gaya baharu ke dalam akar bayangan terus:

var host = document.querySelector('host-element'); // The element that holds the shadow root
var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';
host.shadowRoot.appendChild(style);

Kod ini secara dinamik mencipta elemen dengan peraturan CSS yang diingini dan menambahkannya pada akar bayang elemen hos. Dengan cara ini, peraturan gaya baharu digunakan dalam akar bayang dan mengatasi peraturan sedia ada.

Nota: Penyelesaian ini hanya berfungsi jika mod Shadow DOM ditetapkan kepada 'terbuka'.

Kemas kini (untuk Chrome 73 dan Opera 60 )

Dengan keluaran daripada Chrome 73 dan Opera 60, teknik baharu telah tersedia untuk mengatasi gaya dalam akar bayang:

var sheet = new CSSStyleSheet;
sheet.replaceSync('.color { color: pink }');
host.shadowRoot.adoptedStyleSheets.push(sheet);

Kaedah ini melibatkan mencipta objek CSSStyleSheet dan menambahkannya pada tatasusunan adoptedStyleSheets bagi akar bayang. Helaian gaya baharu kemudiannya boleh digunakan untuk menggantikan gaya sedia ada.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengatasi Gaya dalam Elemen Shadow-Root?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!