javascript - 点燃元素示例中“$=”或“?=”的用途

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 属性有一个$或?后缀？

Answer 1

$和?suffixes 似乎是不推荐使用的无前缀（属性值绑定）和?前缀（布尔属性绑定）的版本，由source 决定。

要设置属性而不是属性，$请在属性名称后附加后缀。

例子：

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

⋮</p>

@deprecated 请改用 /lit-html.js。lit-extended 将在未来的版本中删除。

所以你现在需要这个：

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

'当然，如果留下了那些被弃用的东西，谁知道他们的其他上下文有多相关。