Litelement 组件样式 - ：带有属性或类的主机答案

【问题标题】：Litelement component styling - :host with attributes or classesLitelement 组件样式 - ：带有属性或类的主机
【发布时间】：2021-08-08 23:04:32
【问题描述】：

我正在使用 lit-element (Typescript) 开发 Web 组件。我有一个在 HTML 上表示的按钮，如下所示：

<wc-btn class="class1" attribute1></wc-btn>

attribute1 定义为反射：

@property({ type: Boolean, reflect: true })
public attribute1: Boolean = false;

问题是我是否可以在我的样式中将类与属性混合在一起，如下所示：

:host([attribute1] .class1) {}

or 

:host([attribute1]) .class1 {}

或其他。我已经看到了这个问题，但对我不起作用：

提前致谢

【问题讨论】：

【解决方案1】：

您可以在 shadow DOM 中设置控件样式，因此：

:host([attribute1]) .class1 {}

将适用于任何带有class1 在带有[attribute1] 的组件的影子DOM。

这不会级联到光 DOM 或子组件，但您可以根据反射的布尔属性设置样式。

同时：

:host([attribute1].class1) {}

仅当主机同时具有 class1 和 [attribute1] 类时才适用于主机。

【讨论】：