How to style child elements inside a slotted parent?

Question

<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.

Danny '365CSI' Engelman · Accepted Answer · 2023-04-11T11:56:55.187

1

::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

edited Apr 11 '23 at 11:56

answered Apr 11 '23 at 11:12

Danny '365CSI' Engelman

16,526
2
32
49

Okay, I have another related question. I instead created a column component, and I slot it inside the a flex container, but while the flex formatting context is applied, it appears that the slotted components are not flex-items, because their width does not adjust to the available space inside the container, instead it always stays fixed. Can you please confirm or deny that slotted components inside a flex container do not become flex-items? – happy_story Apr 11 '23 at 14:07
I am no flex expert; ask it as a different question – Danny '365CSI' Engelman Apr 11 '23 at 14:16

How to style child elements inside a slotted parent?

1 Answers1