Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengatasi Gaya dalam Elemen Shadow-Root?

Bagaimana untuk Mengatasi Gaya dalam Elemen Shadow-Root?

Susan Sarandon
Susan Sarandonasal
2024-11-12 22:41:02221semak imbas

How to Override Styles in a Shadow-Root Element?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn