How can I get a reference to the changed element using *Changed?

Question

Here's my html:

<polymer-element name="my-textarea">
  <template>
    <link rel="stylesheet" href="my_textarea.css">
    <textarea value="{{val}}"></textarea>
    <p>Val is: {{val}}</p>
  </template>
  <script type="application/dart" src="my_textarea.dart"></script>
</polymer-element>

Here's my dart:

@CustomTag('my-textarea')
class MyTextarea extends PolymerElement {
  @observable var val = "Hello, World";

  MyTextarea.created() : super.created() {}

  valChanged(oldValue, newValue) {
    print("okay!");
  }
}

Instead of printing "okay!" when the value of the textarea changes, I would like to print the selectionStart. This is a property of the HTML element, so I need a reference to it. How can I get that inside the valChanged function?

Answer 1

If you add an ID to the <textarea>, you can access it from within your class like so: $['my-textarea']

With that reference, you can access any textarea property you want.

Answer 2

The valChanged method doesn't provide a reference to the element which caused the change. This method is called no matter what caused the change of the value. If you have val = 'xxx'; in your code somewhere valChanged is called as well, not only when my-textarea is changed.