::slotted()
Quick Summary for ::slotted
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).
Code Usage for ::slotted
/* Selects any element placed inside a slot */ ::slotted(*) {   font-weight: bold; }  /* Selects any <span> placed inside a slot */ ::slotted(span) {   font-weight: bold; } 
More Details for ::slotted

::slotted()

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; } 

Syntax

::slotted( <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

Highlighting slotted elements

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> 

Specifications

Specification
CSS Scoping Module Level 1 # slotted-pseudo

See also

Web components Select your preferred language English (US)Français日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Don't look to be the next Facebook, try to solve a real problem instead.
Unknown
Random CSS Property

src

The src CSS descriptor of the @font-face rule specifies the resource containing font data. It is required for the @font-face rule to be valid.
src (@font-face) css reference