如何为插槽父元素内的子元素设置样式？插槽后代样式不生效问题

::slotted()选择器的规则是仅能匹配被直接插入插槽的顶级元素，无法穿透到这些元素内部的后代节点。你的代码里，& h5展开后是::slotted([slot=col]) h5，尝试通过插槽元素选择其内部的h5，这不符合::slotted()的语法规范，浏览器会忽略这类无效选择器，导致内部元素样式不生效。

根据实际场景，可选择以下方案：

方案1：在插槽内容的作用域中编写样式 #

直接在提供插槽内容的页面/组件里，针对[slot=col]内部的元素写样式：

[slot="col"] h5 {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

[slot="col"] p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

方案2：通过CSS变量传递样式 #

在插槽容器的样式中定义CSS变量，再在插槽内部元素中引用这些变量：

1. 修改容器样式：

& ::slotted([slot=col]) { 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: tokens.$color-text-black;
  width: 276px;
  height: 168px;
  /* 定义CSS变量 */
  --h5-font-weight: 600;
  --h5-font-size: 16px;
  --h5-line-height: 24px;
  --p-font-weight: 400;
  --p-font-size: 16px;
  --p-line-height: 24px;
}

2. 插槽内容的样式（全局或所在作用域）：

[slot="col"] h5 {
  font-weight: var(--h5-font-weight);
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
}

[slot="col"] p {
  font-weight: var(--p-font-weight);
  font-size: var(--p-font-size);
  line-height: var(--p-line-height);
}

方案3：拆分插槽（适用自定义组件场景） #

如果自定义组件结构允许，把内部元素单独设为插槽，直接用::slotted()选中：

<!-- 自定义组件内部结构 -->
<div>
  <slot name="col-title"></slot>
  <slot name="col-content"></slot>
</div>

<!-- 使用组件时的插槽内容 -->
<div slot="col">
  <h5 slot="col-title">Title</h5>
  <p slot="col-content">content</p>
</div>

/* 组件内的样式 */
& ::slotted([slot=col-title]) {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

& ::slotted([slot=col-content]) {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

内容的提问来源于stack exchange，提问作者happy_story