[css-scoping] The ::slotted() doesn't say anything about the fallback slot content.

[praveenpuglia]

The spec says

The ::slotted() pseudo-element represents the elements assigned, after flattening, to a slot. This pseudo-element only exists on slots.

If I now arrive at a situation where the fallback for a slot is used, I am guessing that it'll come up in the flattened view as well. That would mean that I can find use the ::slotted() to query the fallback markup elements and apply styles to them?

It's not really clear how to style the fallback content in general.

Currently I am doing something like this inside my shadow-root styles.

/* works but not sure if this is the best way to do it. */

slot[name="profile-picture"] svg {
  width: 64px;
  height: 64px;
}

/* doesn't */
::slotted(svg) {
  width: var(--card-picture-dimension, 64px);
  height: var(--card-picture-dimension, 64px);
}

[tabatkins]

The fallback content is just the DOM children of the slot element, so you can target and style them normally. Your first example is indeed correct.

[praveenpuglia]

Thanks for the clarification. :)