This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
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
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-11-25T09:38:54+00:00) Day 45: the specificity of ::slotted() content. Retrieved from https://www.scien.cx/2022/11/25/day-45-the-specificity-of-slotted-content/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.