Styling default slot in webcomponents

Question

In webcomponents, we have two type of slots (named slots and default slots). We can easily style named slots by using syntax slot[name]::slotted(*). But is there any way that we can style default slots because they don't have any name associated?

The code is something like this and i'm using Angular Elements.

<div class="topbar-item">
  <slot class="icon" name="icon"></slot>
  <span class="text">
   <slot></slot> <-- This is the slot i want to add styles, only if the slot has some data assigned. (need to add margin-left)
  </span>
</div>

score 2 · Answer 1 · answered Apr 30 '20 at 09:12

2

You can just use the :not() pseudo-class:

<style>
...

slot:not([name])::slotted(*) {
  ...
}

...
</style>

answered Apr 30 '20 at 09:12

lamplightdev

2,041
1
20
24

Danny '365CSI' Engelman · Answer 2 · 2022-11-06T14:58:37.127

It is a misconception slotted content is MOVED to slots in shadowDOM

It is NOT!;

It remains invisible in lightDOM and is REFLECTED to its SLOT in shadowDOM

That means you can apply styles after content has been slotted (mouseover in the code below)

Or.. to style UNnamed slots, you style the UNnamed content in lightDOM:

For a really deep dive explanation see: ::slotted CSS selector for nested children in shadowDOM slot

customElements.define("my-element", class extends HTMLElement {
  connectedCallback() {
    let template = document.getElementById(this.nodeName);
    this.attachShadow({
      mode: 'open'
    }).appendChild(template.content.cloneNode(true));
  }
})

my-element div {
  background: lightcoral;
  padding: 1em;
  margin-top:.5em;
}

my-element div:hover {
  background: lightgreen;
}

h1{
  background:lightblue;
  color:black;
  margin:0;
}
h1:hover {
  color: red;
}

<template id=MY-ELEMENT>
  <style>
    :host {
      display: block;
      padding:.5em;
      background:green;
    }
    ::slotted(*){
      color:white;
    }
    div{
      border:1px dashed black;
    }
  </style>
  <div>
  <slot name=title></slot>
  <slot></slot>
  </div>
</template>

<my-element>
  <div>Custom Elements Rule!</div>
  <h1 slot=title>Hello World!</h1>
  <div>What a wonderfull day!</div>
</my-element>

Note! how all unnamed content goes into the (one) unnamed SLOT

From what i understood in this way, we have to style the element (slot actually) everytime we use right? It's not reusable - isn't it? I mean whenever we are using the custom-element, we have to do the needed change to the element styles - breaking the reusability — Kavinda Jayakody, Apr 15 '20 at 20:02
That is the same case for regular HTML5 Elements and their CSS... so if you have UNnamed slots (a PITA, see the order of DIVs in the snippet) you have to wrap it in another Custom Element (just like you do with regular HTML5 you want to componentize (is that a word) — Danny '365CSI' Engelman, Apr 15 '20 at 20:09

score 0 · Accepted Answer · answered Apr 15 '20 at 19:41

Found a little workaround until someone finds a better way. We can use slotchange event to make sure whether any items attached to the slot or not. In this way.

HTML

<slot (slotchange)="onSlotChanged($event)"></slot>

JS/TS

    onSlotChanged($event) {
       const slotHasData = $event.target.assignedNodes().length > 0;
       // Is event.target.assignedNodes().length return more than 0, it has nu of items attached to the slot
    }

Styling default slot in webcomponents

3 Answers3

Linked