使用带连字符的ID名称

Question

在我的HTML中，我使用ID为<my-element id="my-widget">

的元素

然后，在DevTools中，我可以检查<my-element>，然后在控制台中：

$0 --> <my-element id="my-widget">
$0.id --> my-widget
this.$.my-widget --> Uncaught ReferenceError: widget is not defined

当我尝试获取属性时也会发生这种情况。如果属性为my-data="hello"：

$0.my-data --> Uncaught ReferenceError: data is not defined

Answer 1

this.$.my-widget被解析为this.$.my - widget（从widget减去this.$.my。

this.$是JavaScript object，其属性可以通过点表示法或方括号表示法访问。因此，this.$.foo与this.$['foo']相同。因此，您可以this.$['my-widget']访问<my-element>。

属性处理方式略有不同。他们是mapped between dash-case and camelCase。假设：

<my-element id="my-widget" my-data="foo">

...您可以通过以下方式访问该属性：

this.$['my-widget'].myData