Bagaimana untuk Mengatasi Gaya dalam Elemen Shadow-Root?

Gaya Mengatasi dalam Elemen Akar Bayang

Shadow DOM mengasingkan gaya dalam skopnya, menjadikannya mencabar untuk mengubah suainya menggunakan peraturan CSS global . Untuk menangani perkara ini, pertimbangkan penyelesaian berikut:

Suntikan Gaya Terus ke Akar Bayangan:

Buat elemen gaya baharu dan tetapkan innerHTMLnya kepada perubahan gaya yang diingini:

var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';

Seterusnya, tambahkan elemen gaya pada akar bayang:

host.shadowRoot.appendChild(style);

Nota: Pendekatan ini memerlukan Shadow DOM ditetapkan kepada mod 'terbuka' .

Peningkatan Chrome 73 dan Opera 60:

Dalam versi terbaharu penyemak imbas ini, objek CSSStyleSheet boleh dijadikan instantiated dan digunakan terus pada Shadow DOM:

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

Awas: Jangan tambah helaian gaya yang sama beberapa kali pada tatasusunan Lembaran Gaya yang diterima pakai, terutamanya semasa muat semula halaman SPA.

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!