Dalam dokumentasi MDN, :host-context() ditakrifkan sebagai:

:host-context() Fungsi kelas pseudo CSS memilih hos bayangan yang mengandungi DOM bayangan CSS di dalamnya (supaya anda boleh memilih elemen tersuai daripada DOM bayangannya) - tetapi hanya jika pemilih diberikan sebagai fungsi hujah Sah hanya jika ia sepadan dengan kedudukan nenek moyang hos bayangan dalam hierarki DOM. Dalam erti kata lain, ini membenarkan elemen tersuai atau apa-apa sahaja dalam DOM bayangannya untuk menggunakan gaya berbeza berdasarkan kedudukannya dalam DOM luar atau kelas/sifat yang digunakan pada elemen nenek moyang.

Masalahnya ialah dalam contoh langsung yang disediakan, :host-context(article, aside) { color: gray; } 语句不起作用。同样，如果我尝试添加其他以空格分隔的复合选择器，例如 :host-context(h1 a){ background: orange}, saya menghadapi masalah yang sama.

Berikut adalah contoh yang diberikan dalam halaman dokumentasi:

/* 仅选择影子根主机，前提是它是选择器参数的后代 */
:host-context(h1) {
  font-weight: bold;
}

:host-context(main article) {
  font-weight: bold;
}

/* 当在文档主体上应用 .dark-theme 类时，将段落文本颜色从黑色更改为白色 */
p {
  color: #000;
}

:host-context(body.dark-theme) p {
  color: #fff;
}

Adakah sesiapa tahu mengapa ini berlaku, atau cara membuat pemilih yang dibatasi ruang (seperti pemilih keturunan) berfungsi dalam hujah untuk :host-context() fungsi kelas pseudo?

Saya menjangkakan :host-context() 伪类函数能够使用类似于 h1 a fungsi kelas pseudo boleh mengambil pemilih kompaun yang dipisahkan ruang yang serupa dengan h1 a sebagai hujah, kerana itulah caranya diterangkan dalam halaman dokumentasi.

Terima kasih.