Bagaimana untuk Mengatasi Gaya dalam Elemen Shadow-Root?

Gaya Mengatasi dalam Elemen Akar Bayangan

DOM Bayangan menawarkan pengasingan untuk penggayaan, menghalang peraturan CSS yang ditakrifkan secara global daripada menjejaskan elemen dalam bayang-bayang pokok. Walau bagaimanapun, mungkin terdapat keadaan di mana anda perlu mengatasi gaya berskop bayangan ini, khususnya dalam situasi di mana elemen yang disasarkan berada dalam pustaka pihak ketiga yang anda tidak boleh mengubah suai secara langsung.

Mengatasi Harta Khusus

Untuk menulis ganti sifat tertentu yang ditakrifkan dalam elemen akar bayang, anda boleh terus menyuntik elemen gaya ke dalam DOM bayang. Ini melibatkan:

1. Membuat elemen gaya:

   var style = document.createElement('style');

2. Menetapkan HTML dalaman elemen gaya dengan peraturan mengatasi:

   style.innerHTML = '.the-class-name { property-name: my-value; }';

3. Menambahkan elemen gaya pada shadowRoot elemen induk:

   host.shadowRoot.appendChild(style);

Kemas Kini 2019 untuk Chrome 73 dan Opera 60

Pendekatan yang lebih baik, diperkenalkan dalam Chrome 73 dan Opera 60 , ialah mencipta objek CSSStyleSheet dan mengaitkannya dengan DOM atau dokumen bayang:

1. Mencipta objek CSSStyleSheet:

   var sheet = new CSSStyleSheet;

2. Mengubah suai objek CSSStyleSheet dengan peraturan override:

   sheet.replaceSync('.color { color: pink }');

3. Menambah helaian gaya pada adoptedStyleSheets tatasusunan DOM bayang:

   host.shadowRoot.adoptedStyleSheets.push(sheet);

Kaedah ini membolehkan penggantian gaya yang lebih cekap dan dinamik. Walau bagaimanapun, adalah penting untuk memastikan helaian gaya yang sama tidak ditambah beberapa kali untuk mengelakkan tingkah laku yang tidak dijangka.

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