javascriptcsssassstenciljsslot

How to style child elements inside a slotted parent?

<div slot="col">
      <h5>Title</h5>
      <ifx-link href="">footer link</ifx-link>
      <ifx-link href="">footer link</ifx-link>
      <ifx-link href="">footer link</ifx-link>
      <ifx-link href="">footer link</ifx-link>
    </div>
    <div slot="col">
      <h5>Title</h5>
      <ifx-link href="">footer link</ifx-link>
      <ifx-link href="">footer link</ifx-link>
      <ifx-link href="">footer link</ifx-link>
      <ifx-link href="">footer link</ifx-link>
    </div>

& ::slotted([slot=col]) { 
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        color: tokens.$color-text-black;
        width: 276px;
        height: 168px;

        & h5 {
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
        }

        & p { 
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
        }

The styles that I apply to ::slotted([slot=col]) do get applied correctly, but the styles I apply to the h5 and p do not apply to these elements.

Does anyone know why, and how do I make this work?

I tried researching on how to slot it.

Solution

  • ::slotted (in shadowDOM) can only style the "skin" first level elements in lightDOM

    if you want to style more in lightDOM you have to use CSS in lightDOM, not inside your component shadowDOM

    Think of it this way: slotted LightDOM content is reflected in a <slot> inside shadowDOM. :slotted shadowDOM CSS can "paint" on the mirror surface, but can't paint the reflection itself.

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