开发学习网CSS host-context()
原创:host-context()
:host-context() CSS 伪类函数选择内部使用了该 CSS 的影子 DOM（shadow DOM）的影子宿主（shadow host），因此你可以从其影子 DOM 内部选择自定义元素——但前提是作为函数参数的选择器与影子宿主的祖先在 DOM 层次结构中的位置匹配。
换句话说，这允许自定义元素或其影子 DOM 内的任何内容根据其在外部 DOM 中的位置或应用于祖先元素的类/属性应用不同的样式。
这样子做的一个典型用法是与后代选择器表达式（例如 h1）一起使用，仅选择在 <h1> 内的自定义元素的实例。另一个典型用法是允许内部元素对任何祖先元素上的类或属性做出反应，例如，在将 .dark-theme 类应用于 <body> 时应用不同的文本颜色。
备注： 这在影子 DOM 之外使用时无效。
css
/* 选择影子根宿主，仅当它是给定的选择器参数的后代 */
:host-context(h1) {
font-weight: bold;
}
:host-context(main article) {
font-weight: bold;
}
/* 当 .dark-theme 类应用于文档 body 时，将段落文本颜色从黑色更改为白色 */
p {
color: #000;
}
:host-context(body.dark-theme) p {
color: #fff;
}
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
上一篇：CSS
host 下一篇：CSS
: host ()
相关文章
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)