Skip to content

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

@praveenpuglia

Description

@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);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions