[TPAC Prep] CSS Slot Content Detection

[e111077]

Authors: Elliott Marquez (@e111077) & Jared White (@jaredcwhite)

Background

In shadow DOM, projection is the concept of placing an element into the light DOM and rendering it in a custom position via slots in the shadow DOM. This allows for greater control over the layout and styling of elements while also giving the user direct control over the contents and styling since the nodes are in the light DOM.

These are the current mechanisms in which to interact with slotted content:

• ::slotted() pseudo element
  • It can take selectors and can only select directly slotted children and not their subtree.
• A <slot> can also have children
  • Those children will only render if there is no slotted content assigned to that slot
  • Content can include any Node including a whitespace text node

Developer-facing Problem

Currently there is no CSS-only way to determine whether a <slot> has content assigned to it without requiring the consumer of a web component to explicitly state so.

Use Case Example

In the web component-based https://github.com/material-components/material-web, there is the Dialog component. The dialog component can have three sections slotted in:

• slot=headline
• slot=content
• slot=actions

When the dialog’s content is slotted, the dialog must show a divider which is rendered in its shadow DOM. In essence the <md-divider> which is a sibling to <slot name=”content”> must be styled. e.g

<md-dialog has-content>
  <template shadowrootmode="open">
    <style>
      md-divider {
        display: none;
      }
      :host([has-content]) md-divider {
        display: flex;
      }
    </style>
    ...
    <div class="content">
      <md-divider class="before"></md-divider>
      <slot name="content"></slot>
      <md-divider class="after"></md-divider>
    </div>
    ...
  </template>

  <div slot="content">
    Really long content ...
  </div>
</md-dialog>

The DX would be cleaner if has-content could be inferred by the CSS rather than the user having to apply it or JS having to run at runtime.

Using /slotted/for the sake of example.

<md-dialog>
  <template shadowrootmode="open">
    <style>
      md-divider {
        display: none;
      }
      .content md-divider:has(~ slot/slotted/ *),
      .content slot:has(/slotted/ *) ~ md-divider {
        display: flex;
      }
    </style>
    ...
    <div class="content">
      <md-divider class="before"></md-divider>
      <slot name="content"></slot>
      <md-divider class="after"></md-divider>
    </div>
    ...
  </template>

  <div slot="content">
    Really long content ...
  </div>
</md-dialog>

This removes the need for the user to declare that there is slotted content twice:

1. div[slot=content]
2. md-dialog[has-content]

Proposal Discussions

• /slotted/ combinator CSS-WG (more general but it could support :has(/slotted/))
  • [css-shadow-parts] Make ::slotted() a combinator csswg-drafts#7922
• :hasSlotted() WICG
  • CSS selector to style slots with slotted elements WICG/webcomponents#936
• General pseudo class discussion for content detection
  • [selectors] Pseudo-class to indicate when a slot has content csswg-drafts#6867

Workarounds

There are two types of workarounds, the comprehensive JS approach and the less-generalized additive spacing approach.

Generalized JS approach

• Listen for the slotchange event on the slot
• Determine whether slotchange has content or not
• Apply an attribute on host or a class in the shadow dom of a shared parent that requires the slot detection styling
• Style whatever needs to be styled

e.g. in Lit for conciseness

class MdDialog extends LitElement {
  static styles = css`
    md-divider {
      display: none;
    }
    :host([has-content]) md-divider {
      display: flex;
    }
  `;

  @property({type: Boolean, attribute: 'has-content', reflect: true})
  hasContent = false;

  render() {
    return html`
      ...
      <div class="content">
        <md-divider class="before"></md-divider>
        <slot name="content" @slotchange=${this.onSlotchange}></slot>
        <md-divider class="after"></md-divider>
      </div>
      ...
    `;
  }


  onSlotchange(e: Event) {
    const slotEl = e.target as HTMLSlotElement;
    this.hasContent = !![...slotEl.assignedElements({flatten: true})].length;
  }
}

Issues with approach

This requires JS which means it is incompatible with SSR without hydration and the user defining the host attribute.

Since the user must define the host attribute correctly, this approach may easily lead to layout shift after element upgrade if the user has not set the correct attribute.

Additive Spacing Approach

This approach works where the slot detection changes styles such that spacing is added or removed to sibling nodes.

For example in the following case where a button with an icon should have 20px inline margins when there is no icon but 16px and 20px inline start and end margins respectively. This is an example with /slotted/.

class MdExtendedFab extends LitElement {
  static styles = css`
    button {
      margin-inline: 20px;
    }
    slot[name=icon]:has(/slotted/ *) ~ slot[name="label"] {
      display: inline-flex;
      margin-inline-start: 12px;
    }
    button:has(slot[name=icon] /slotted/ *) {
      margin-inline-start: 16px;
    }
  `;

  render() {
    return html`
      <button>
        <slot name="icon"></slot>
        <slot name="label"></slot>
      </button>
    `;
  }
}

With this approach, one would:

• Add a spacer node to be the default child content of a slot
• Apply default spacing to the child
  • E.g.

   slot[name=icon] span {
     margin-inline-start: 4px;
   }

  • This loosely equates to

   slot[name=icon]:not(:has(/slotted/ *)) {
     display:inline-flex;
     margin-inline-start: 4px
   }

• Apply the difference in margins to the previous sibling:
  • E.g.

   button: {
     margin-inline-start: 16px;
   }

• Apply /slotted/ styles to the slotted children

Example of the additive spacing approach.

class MdExtendedFab extends LitElement {
  static styles = css`
    button {
      margin-inline: 16px 20px;
    }
    slot[name="icon"] span {
      margin-inline-start: 4px;
    }
    slot[name="icon"]::slotted(*) {
      margin-inline-end: 12px;
    }
  `;

  render() {
    return html`
      <button>
        <slot name="icon"><span></span></slot>
        <slot name="label"></slot>
      </button>
    `;
  }
}

Issues With Approach

• This approach is very specialized to spacing
  • It won’t work with applying display to siblings
• It only works where you can add spacing unconditionally
  • md-dialog, for example, has complex styles that apply specific margins based on the combination of what is slotted in
  • This could be work if sibling selectors could select based on a siblings tree
• It requires rendering an extra node

Polyfill

This is not generally polyfillable without a JavaScript approach.

Browser Positions

No official or concrete positions.

Next Steps

WCCG needs to choose a proposal to champion, refine, and move forward as well as prioritize this issue amongst the few we would like to champion.

Author’s recommended proposal

/slotted/ approach as discussed in CSSWG. It is ambitious but it fixes more issues around slotted styles.

[e111077]

Meeting AIs:

• update update proposal to use /slotted/ instead of :has-slotted
• add more context to the discussions and what specifics have been discussed already
• update next steps to include reaching out to browser implementers for feelers on proposals at TPAC
• include note for :has necessity for /slotted/
• include note for selecting elements vs nodes
• include what is missing from discussions to enable functionality to support slot content detection
• in use case section clearly delineate between the problem and possible solution
• do an example that has two slots and one divider and only show when one is there

[justinfagnani]

@e111077 can you write out what using /slotted/ to solve this would actually look like?

[e111077]

updated!

[nolanlawson]

Just wanted to +1 this. We've seen this come up very commonly, where component authors use slotchange to style themselves based on whether they have slotted content or not.

This requires JS which means it is incompatible with SSR without hydration

One thing to add: SSR/hydration is currently hampered not just from the perspective of progressive enhancement or FOUC, but also because you must have an implementation/polyfill of "slotchange" on the server side. We've resisted doing this in LWC because it introduces extra hairiness in the rendering model and would make it much harder (if not impossible) to do streamed rendering (i.e. the host element has to "know" what content is inside of it before it can style itself with an attribute/class, meaning you can't just render as you walk down the tree).

Content can include any Node including a whitespace text node

One small callout: I wonder if it will be a bit confusing for authors that 1) /slotted/ triggers even when a text node is slotted into the custom element, but 2) :slotted() only triggers for slotted elements (not text nodes). I'm not sure this is a dealbreaker, but I think this may lead to surprises if developers expect the two to always trigger in the same cases.