如何在模板标签中设置有槽元素的样式

Question

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

Answer 1

如果类是在一个外部的css文件(像全局的一个styles.css，或父类)，只是试着删除:host指令。要确保它会影响span元素，请使用also !important指令。你也可以用css类指定你想要影响的唯一一个/多个类，比如:

(如果类在那里，HTML代码被调用，例如"test.html")

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

如果你想让这个类影响整个应用程序(如果你把这个css类放在styles.css中)，当你使用这些id和类名时，你可以删除app-test块:

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

我尝试了:host块，但它没有工作，但这样它应该可以工作。希望对你有帮助:)