:host()
source link: https://developer.mozilla.org/en-US/docs/Web/CSS/:host()
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
:host()
The :host()
CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.
The most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. You can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. That's the job of :host-context()
.
Note: This has no effect when used outside a shadow DOM.
/* Selects a shadow root host, only if it is
matched by the selector argument */
:host(.special-custom-element) {
font-weight: bold;
}
Syntax
:host( <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
Selectively styling shadow hosts
The following snippets are taken from our host-selectors example (see it live also).
In this example we have a simple custom element — <context-span>
— that you can wrap around text:
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
Inside the element's constructor, we create style
and span
elements, fill the span
with the content of the custom element, and fill the style
element with some CSS rules:
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; }';
The :host(.footer) { color : red; }
rule styles all instances of the <context-span>
element (the shadow host in this instance) in the document that have the footer
class set on them — we've used it to give instances of the element inside the <footer>
a special color.
Specifications
The definition of ':host()' in that specification. Working Draft Initial definition.
Browser compatibility
Report problems with this compatibility data on GitHubdesktopmobileChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet:host()
Legend
See also
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK