Автоматический узел обнаружения с дефисом имен ID

Question

В моем HTML, я использую элемент с идентификатором, как <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