:host-context()

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

:host-context() CSS 伪类的作用是选择shadow DOM 中shadow host,这个伪类内可以写关于该shadow host的CSS规则。 (我们可以从 shadow DOM 中选择一个自定义元素 custom element) — 但前提是,在DOM 层级中,括号中的选择器参数必须和shadow host 的祖先相匹配。

典型的使用方法是后代选择器表达式。例如 h1   — 只选择在<h1> 内的自定义元素的实例。

Note: 该伪类的css样式在 shadow DOM 之外的元素上是没有效果的

/* 选择了一个 shadow root host, 当且仅当这个
 shadow root host 是括号中选择器参数(h1)的后代 */ 

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

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

Syntax

:host-context( <compound-selector-list> )

where
<compound-selector-list> = <compound-selector>#

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

Examples

下边的代码片段来自 host-selectors (这里查看样式效果)。

在本例中,我们有一个简单的自定义元素 — <context-span> — 你可以把文字包裹在该自定义标签中:

<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>

在自定义元素的构造器函数中,我们创建 style 和 span 元素。让 span 里呈现的是自定义元素的文字内容,并且给style 元素一些CSS 规则。

let style = document.createElement('style');
let span = document.createElement('span');
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent = 'span:hover { text-decoration: underline; }' +
                    ':host-context(h1) { font-style: italic; }' +
                    ':host-context(h1):after { content: " - no links in headers!" }' +
                    ':host-context(article, aside) { color: gray; }' +
                    ':host(.footer) { color : red; }' +
                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';

:host-context(h1) { font-style: italic; } 和 :host-context(h1):after { content: " - no links in headers!" 这些CSS 规则规定了位于<h1> 标签内部的 <context-span> 元素的实例的样式。

Specifications

Specification Status Comment
CSS Scoping Module Level 1
:host-context()
Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:host-context()
Experimental
Chrome Full support 54Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1082060.
IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1082060.
Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See also