Lit模板中HTML元素属性赋值何时需使用点前缀？

Lit模板里的.前缀，是用来直接操作DOM元素的JavaScript属性，而非HTML标签上的特性，绝对不止给value赋值时才需要用。具体什么时候用，看你要操作的是属性还是特性：

• 当你需要修改DOM元素的JS属性时，必须加.前缀
  DOM元素在JS里是个对象，有很多专属属性，这些属性和HTML特性不是一回事：比如<input>的value属性是实时反映用户输入的当前值，而写在标签里的value特性只是初始值，用户输入后两者就不同步了。这时候如果用不带前缀的value=${val}，只是修改了HTML特性，输入框的实际内容不会变；只有用.value=${val}，才能直接修改JS属性，让输入框内容实时更新。

  类似的场景还有很多，比如：

  <!-- 设置元素文本内容 -->
  <div .textContent=${dynamicText}></div>
  <!-- 绑定图片的动态地址 -->
  <img .src=${imageUrl}>
  <!-- 控制元素隐藏状态 -->
  <div .hidden=${shouldHide}></div>
  

• 不带前缀的表达式是设置HTML特性
  像示例里的div label=${label}，是给<div>加了个自定义HTML特性label，这个值是字符串类型，会直接渲染到HTML标签上。对于布尔类型的特性（比如disabled），Lit用?前缀来设置，但核心逻辑还是：不带前缀对应HTML特性，.前缀对应DOM的JS属性。

总结：只要你要操作的是DOM元素在JS层面的属性，就加.前缀；如果只是给HTML标签加特性（包括自定义特性），就用不带前缀的表达式。

内容的提问来源于stack exchange，提问作者Ole