::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...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

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

minecraft
Random CSS Property

clip

The clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed.
clip css reference