在 lit-element 的示例代码中，“$=”或“?=”的作用是什么？

Question

我不太理解?=和$=的用法，以下是这两个例子：

第一个例子：Lit-Element README

<div id="box" class$="${this.uppercase ? 'uppercase' : ''}">
  <slot>Hello World</slot>
</div>

第二个例子：PWA 实例应用

<div class="decorator" focused?="${_focused}">
  <slot id="inputSlot" name="input"></slot>
  <div class="underline"></div>
</div>

为什么这些HTML属性会有$或?后缀？

- Spicy Meatball

Answer 1

$ 和 ? 后缀似乎是无前缀（属性值绑定）和 ? 前缀（布尔属性绑定）的过时版本，根据 源代码。

To set an attribute instead of a property, append a $ suffix to the attribute name.

Example:

html`<button class$="primary">Buy Now</button>`

⋮

@deprecated Please use /lit-html.js instead. lit-extended will be removed in a future version.

那么现在你需要这个：

<div id="box" class="${this.uppercase ? 'uppercase' : ''}">
  <slot>Hello World</slot>
</div>

<div class="decorator" ?focused="${_focused}">
  <slot id="inputSlot" name="input"></slot>
  <div class="underline"></div>
</div>

当然，如果那些被弃用的东西被保留下来，谁知道他们的其他上下文是否还具有相关性。

- Ry-

---

非常感谢！我能够找到最新的文档。看起来他们正在切换到另一种语法来处理变量和属性。 - Spicy Meatball