Apakah itu `::content` pseudo-element dan bagaimana ia berfungsi dengan `::slotted`?

Apakah itu ::content/::slotted pseudo-element dan bagaimana ia berfungsi?

The ::content pseudo-element digunakan untuk memilih nod teragih di dalam elemen. Ia biasanya dipasangkan dengan ::slotted pseudo-element, yang memilih nod yang telah dimasukkan ke dalam elemen.

Bagaimanakah ia berfungsi?

Apabila komponen didaftarkan, ia mewujudkan DOM bayangan yang merupakan persekitaran yang serba lengkap dan terpencil. DOM bayangan mengandungi gaya dan penanda komponen, dan ia tidak dipengaruhi oleh gaya dokumen utama.

Apabila komponen disegerakan, ia dimasukkan ke dalam dokumen utama dan DOM bayangannya juga dicipta . DOM bayangan disambungkan ke dokumen utama oleh elemen slot, yang membolehkan kandungan komponen dipaparkan ke dalam dokumen utama.

Nod diedarkan daripada penanda komponen ke elemen slot menggunakan pseudo terdistribusi :: -elemen. Elemen pseudo ::content kemudiannya boleh digunakan untuk memilih dan menggayakan nod ini, walaupun ia bukan turunan langsung daripada elemen komponen.

Contoh

The contoh berikut menunjukkan cara menggunakan ::content pseudo-element untuk menggayakan kandungan komponen:

#my-component ::content {
  color: red;
}

Ini kod akan menukar warna semua teks dalam komponen kepada merah.

Nota:

Unsur pseudo ::slotted digunakan dalam versi CSS yang lebih baharu dan ia tidak disokong oleh semua pelayar. Untuk keserasian dengan penyemak imbas lama, anda harus menggunakan ::content pseudo-element sebaliknya.

Atas ialah kandungan terperinci Apakah itu `::content` pseudo-element dan bagaimana ia berfungsi dengan `::slotted`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!