Day 45: the specificity of ::slotted() content
source link: https://www.matuzo.at/blog/2022/100daysof-day45/
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.
Day 45: the specificity of ::slotted() content
posted on November 25., 2022
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
When you pass an element to a web component through a <slot>
, you can select that element using the ::slotted()
pseudo-element and apply additional styles.
Let's take the following component. There's a paragraph in the shadow DOM and another paragraph coming from the light DOM, passed through a <slot>
, and there's a global style turning the background color of paragraphs aqua.
p {
background-color: aqua;
}
class SlotComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
const content = document.createElement('div')
content.innerHTML = `
<p>not slotted</p>
<slot></slot>
`
this.shadowRoot.appendChild(content)
}
}
customElements.define('slot-component', SlotComponent);
<slot-component>
<p>slotted</p>
</slot-component>
slotted
The global styles only apply to the slotted paragraph. We've already learned why in “Day 10: global styles and web components”.
If you add styles to the shadow DOM, you can see how these styles only apply to the paragraph inside the shadow DOM, but not to the slotted paragraph.
const styles = document.createElement('style')
styles.innerHTML = `
p {
background-color: salmon;
}
`
this.shadowRoot.appendChild(styles)
slotted
If you want to style slotted content from within the component, you can use the ::slotted()
pseudo-element.
const styles = document.createElement('style')
styles.innerHTML = `
p {
background-color: salmon;
}
::slotted(p) {
background-color: red;
}
`
this.shadowRoot.appendChild(styles)
slotted
As you can see, the background color didn't change. That's because by slotting content you're not moving it from the light DOM to the shadow DOM. The nodes physically stay where they are, they're just reflected inside the web component. This also means that global document styles still apply. By using ::slotted()
we can add additional styles, but by default these styles have lower specificity than global document styles.
That changes if we add !important
to the mix.
const styles = document.createElement('style')
styles.innerHTML = `
p {
background-color: salmon;
}
::slotted(p) {
background-color: red !important;
}
`
this.shadowRoot.appendChild(styles)
slotted
Further reading
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK