Polymer：数据绑定语法attribute-name \ $的作用是什么？

Question

我遇到了一些我不理解的语法。 docs for data binding in Polymer解释了两种不同的数据绑定语法：

• 一个用于绑定 properties 的对象：
  prop-name=...
• 以及用于绑定属性的一个（例如href，src，style等）：
  attr-name$=...

试图从现有组件的源代码中学习，我遇到了name\$=...构造，到目前为止，我还没有找到关于它的任何文档。

在source for <paper-input>中，例如hidden元素上的label属性的以下数据绑定：

<label hidden\$="[[!label]]" ... >[[label]]</label>

hidden甚至不在list of properties, that require attribute binding上（尽管该列表可能不完整）。所以我感觉真的被卡在了（糊涂了）。

为什么这是hidden\$=...（即带有反斜杠）而不是hidden$=..."（没有反斜杠）或hidden=...（没有反斜杠且没有美元符号）的原因？此语法有什么作用？它是做什么用的？

Answer 1

数据绑定作为HTML属性出现在本地DOM模板中

property-name=annotation-or-compound-binding attribute-name$=annotation-or-compound-binding

绑定的左侧标识目标属性或属性。

要绑定到属性，请按照属性名称到属性名称映射中的描述，使用属性形式的属性名称（不是大写形式的camelCase）：

<my-element my-property="{{hostProperty}}">

此示例绑定到目标属性myProperty。

要绑定到属性，请使用属性名称，后跟$：

<a href$="{{hostProperty}}">

此示例绑定到锚点元素的 href 属性。

https://www.polymer-project.org/3.0/docs/devguide/data-binding