javascript - lit-element 示例中 "$="或 "?="的用途

Question

我无法理解 ?= 或 $= 这两个示例的用法:

第一个例子:Lit-Element README

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

第二个例子:PWA Example App

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

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

Answer 1

$ 和 ? 后缀似乎是无前缀(属性值绑定(bind))和 ? 前缀( boolean attribute binding )的弃用版本，路过the source .

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>

'当然，如果保留了已弃用的内容，谁知道其余上下文的相关性如何。