CSS variables for custom component in a slot

Question

I have a custom component which is using another component within it but slotted. The component is set up like this:

<div class="nys-modal">
  <!-- rest of component -->
  <div class="nys-modal_footer">
    <slot name="actions"></slot>
  </div>
</div>

and so the implementation is

<nys-modal>
  <!-- other content not in slot -->
  <div slot="actions">
    <nys-button label="Action 1"></nys-button>
    <nys-button label="Action 2"></nys-button>
  </div>
</nys-modal>

I have a css variable --_nys-button-width set up which I can override in the nys-modal.styles file but it only works if the <nys-button> is set up in the <nys-modal>, not when it is passed in through the slot. I want to override the --_nys-button-width to be 100% but something like the following doesn't work:

::slotted([slot="actions"]) nys-button {
  --_nys-button-width: 100%;
}

This is only an issue on the slot. I can easily manipulate --_nys-button-width (or any of my other css vars) for the nys-button in the nys-modal component that is not a slot with:

nys-button {
  --_nys-button-width: 100%;
}

Slotted content is reflected, see long SO answer: stackoverflow.com/questions/61626493/… — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Oct 2 at 8:59
The issue you're encountering depends on the fact that CSS variables flow down the DOM tree (i.e. from host to children), but not up or sideways. ::slotted() selectors only apply to the slotted element itself, not its children. — AbsoluteBeginner
– AbsoluteBeginner, Commented Oct 9 at 19:30

Mister Jojo · Accepted Answer · 2025-10-02 02:05:24Z

0

Try to set the CSS variable on the slotted element itself. That means applying the variable to the <div slot="actions">:

::slotted([slot="actions"]) {
  --_nys-button-width: 100%;
}

Then, inside your nys-button, make sure it inherits the variable:

nys-button {
  width: var(--_nys-button-width, auto);
}

edited Oct 2 at 2:05

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

answered Oct 1 at 17:04

goryef

1,4914 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS variables for custom component in a slot

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related