聚合物主机属性错误答案

【问题标题】：Polymer hostAttributes Error聚合物主机属性错误
【发布时间】：2015-08-07 17:53:02
【问题描述】：

我一直在关注 Polymer 1.0 开发人员指南，但在使用 specific part about hostAttributes 时遇到了意外。

当我从文档中获取示例代码时：

hostAttributes: {
  string-attribute: 'Value',
  boolean-attribute: true
  tabindex: 0
}

并将其添加到我的原型中，浏览器不断抛出错误：

Uncaught SyntaxError: Unexpected token -

在有破折号的行上。奇怪的是，当我在 string-attribute 和 boolean-attribute 周围加上引号时，它呈现得很好。

这是我的错误还是文档中的错误？

【问题讨论】：

标签： polymer web-component shadow-dom

【解决方案1】：

在此示例表示string-attribute 的方式中，string-attribute 将字符串作为属性引用，该属性应设置在元素声明的标签上。此外，正如您在示例中声明 string-attribute 的方式可能已经注意到的那样，Javascript 假定 string-attribute 是一个变量，并且不能将变量声明为“my-variable”，而将其声明为“myvariable”，所有字符串在一起。
我认为这就是您应该声明如下的原因：

hostAttributes: {
  "my-var": 'Value',// Javascript assumes that my-bar is an string
  my-var-two: 'value'// Javascript assumes that my-bar-two is a variable (this will fail)
  tabindex: 0
}

希望你能理解我，我的英语很烂。

编辑

如果自定义元素需要在创建时为其设置 HTML 属性，可以在原型的 hostAttributes 属性中声明这些属性，其中键是属性名称，值是要分配的值。值通常应作为字符串提供，因为 HTML 属性只能是字符串；

hostAttributes: {
  string-attribute: 'Value', //string-attribute is a key, should be inside "" because javascript's keys doesn't accepts "-"
  boolean-attribute: true//will fail because is not a key
  tabindex: 0//this works because for javascript this is a correct key
}

...然而，标准的序列化方法用于将值转换为字符串，所以 true 将序列化为一个空属性，而 false 将导致没有设置属性，以此类推

你可以意识到，只有序列化的字符串值，从来没有提到键也被序列化为字符串。正如我之前提到的，我的英语很糟糕，我理解这一点。

【讨论】：

感谢您的回答，我了解变量名称的工作原理，但我特别指的是 Polymer 语法，在文档中它声明您可以将 hostAttributes 明确列为非字符串，它会解析它进入属性名称和值。
@simplexity 我希望这个解释能对你有所帮助。