如何在有槽的父元素中设置子元素的样式？

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

我应用于

::slotted([slot=col])

的样式确实得到了正确应用，但是我应用于

h5

和

p

的样式不适用于这些元素。

有谁知道为什么，我该怎么做？

我试着研究如何插入它。

Answer 1

::slotted（在 shadowDOM 中）只能为 lightDOM 中的“皮肤”第一级元素设置样式

如果你想在 lightDOM 中添加更多样式，你必须在 lightDOM 中使用 CSS，而不是在你的组件 shadowDOM 中

要深入了解，请参阅：::shadowDOM 插槽中嵌套子项的开槽 CSS 选择器