The ::slotted()
CSS pseudo-element represents any element that has been placed into a slot inside an HTML template (see Using templates and slots for more information).
This only works when used inside CSS placed within a shadow DOM. Note also that this selector won't select a text node placed into a slot; it only targets actual elements.
/* Selects any element placed inside a slot */ ::slotted(*) { font-weight: bold; } /* Selects any <span> placed inside a slot */ ::slotted(span) { font-weight: bold; }
::slotted( <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
The following snippets are taken from our slotted-pseudo-element demo (see it live also).
In this demo we use a simple template with three slots:
<template id="person-template"> <div> <h2>Personal ID Card</h2> <slot name="person-name">NAME MISSING</slot> <ul> <li><slot name="person-age">AGE MISSING</slot></li> <li><slot name="person-occupation">OCCUPATION MISSING</slot></li> </ul> </div> </template>
A custom element — <person-details>
— is defined like so:
customElements.define('person-details', class extends HTMLElement { constructor() { super(); let template = document.getElementById('person-template'); let templateContent = template.content; const shadowRoot = this.attachShadow({mode: 'open'}); let style = document.createElement('style'); style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' + 'p { margin: 10px 0; }' + '::slotted(*) { color: gray; font-family: sans-serif; } '; shadowRoot.appendChild(style); shadowRoot.appendChild(templateContent.cloneNode(true)); } })
You'll see that when filling the style
element with content, we select all slotted elements (::slotted(*)
) and give them a different font and color. This allows them to stand out better next to the slots that haven't been successfully filled.
The element looks like this when inserted into the page:
<person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> </person-details>
Specification | Status | Comment |
---|---|---|
CSS Scoping Module Level 1 The definition of '::slotted' in that specification. | Working Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 50 | ? | 63
|
No | 37 | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 50 | 50 | ? | 63
|
37 | Yes | 5.0 |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted