Litelement 组件样式 - :host with attributes or 类

Question

我正在使用 lit-element (Typescript) 开发网络组件。我在 HTML 上有一个这样的按钮：

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

attribute1 定义为 reflect:

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

问题是我是否可以在我的样式中混合使用 class 和这样的属性：

:host([attribute1] .class1) {}

or 

:host([attribute1]) .class1 {}

或其他什么。我看过这个问题但对我不起作用：

提前致谢

Answer 1

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

:host([attribute1]) .class1 {}

将应用于 class1 内部 阴影 DOM [attribute1].

的任何内容

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

同时：

:host([attribute1].class1) {}

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