如何为模板标签中的开槽元素设置样式答案

【问题标题】：How to set styles to a slotted element in a template tag如何为模板标签中的开槽元素设置样式
【发布时间】：2022-07-05 17:55:40
【问题描述】：

<template id="element-details-template">
        <link href="./src/components/lit-button/button.scss" rel="stylesheet">
    <svg ..</svg>
    <span slot="buttonLabel">span1</span>
    <span class="name" slot="buttonSubLabel">span2</span>
</template>

我只想为外部 css 文件中的第二个跨度设置样式。但风格并没有受到影响/反映。我很困惑可能是什么问题？下面的代码是我的css：

:host {
  #element-details-template {
    span.name {
      text-transform:lowercase;
    }
  }

【问题讨论】：

我猜this 是你要求的
@g78 感谢您的回复。抱歉不行。您放置的示例适用于普通的 html 元素。这些是开槽元素，我无法应用我在问题中提到的 CSS 样式。

标签： html css sass

【解决方案1】：

如果该类位于外部 css 文件中（如全局文件 styles.css 或父文件），请尝试删除 :host 指令。为确保它应该影响 span 元素，请同时使用 !important 指令。您还可以使用 css 类指定您想要影响的唯一类/类，例如：

（如果有类，则调用 html 代码，例如“test.html”）

app-test{
  #element-details-template{
    span.name {
      text-transform:lowercase !important;
    }
  }
}

如果您希望此类在使用这些 id 和类名时影响整个应用程序（如果您将此 css 类放在 styles.css 中），则可以删除 app-test 块：

#element-details-template{
   span.name {
      text-transform:lowercase !important;
   }
}

我尝试了 :host 块，但它不起作用，但以这种方式它应该可以工作。希望对你有帮助:)

【讨论】：