Automatische Knoten mit Bindestrichen ID-Namen

Question

In meinem HTML finden, verwende ich ein Element mit einer ID wie <my-element id="my-widget">

Dann in den DevTools, ich kann <my-element> inspizieren und dann in der Konsole:

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

Das passiert auch, wenn ich versuche, Attribute zu bekommen. Wenn das Attribut my-data="hello":

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

Answer 1

this.$.my-widget als this.$.my - widget (die Subtraktion von widget von this.$.my) analysiert.

this.$ ist ein JavaScript object, dessen Eigenschaften durch Punktnotation oder Square-Bracket-Notation aufgerufen werden können. So ist this.$.foo das gleiche wie this.$['foo']. Daher können Sie this.$['my-widget'] auf <my-element> zugreifen.

Attribute werden ein wenig anders gehandhabt. Sie sind mapped between dash-case and camelCase. Unter der Annahme:

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

... Sie das Attribut mit Zugang würde:

Mein Held

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