`this` keyword resolves to HTMLElement in Polymer in beforeRegister method

Question

Is it an intended behavior of Polymer, that beforeRegister() method is executed on a plain HTMLElement? This leads to an error when using an arrow function in the properties-declaration within a computed property value. It fails to resolve this.$ because this is a native HTMLElement, meanwhile the object that function is invoked upon is the extended Polymer Element at runtime (which works if a normal function is used)?

This does not work:

  class TestComponent {
    beforeRegister() {
      /* during beforeRegister() execution `this` is a `HTMLElement`*/
      this.is = 'test-component';
      this.properties = {
        _testElement: {
          type: Object,
          value: () => this.$.testElement
        }
      };
    }
  }

This does work:

  class TestComponent {
    beforeRegister() {
      this.is = 'test-component';
      this.properties = {
        _testElement: {
          type: Object,
          value: function() {
            /* `this` is an instance of TestComponent */
            return this.$.testElement
          }
        }
      };
    }
  }

It is not a big issue, but I am wondering, whether it is an issue towards ES6 support in Polymer and will be fixed or whether it is an intended behavior.

The babel transpilation is correct. The `this` in that arrow function is the same `this` as in `beforeRegister`, shouldn't it? — Bergi, Jun 03 '16 at 08:17
It should be an instance of `TestComponent`. The problem is that while beforeRegister() is beeing executed `this` is an instance of `HTMLElement`. Maybe Polymer is the the source of the problem here. This could be an issue, as others will face the same, especially when using polymer with es6 classes. So I'd rather just mark it as duplicate. — SeDav, Jun 03 '16 at 08:29
Sure, Polymer might be doing weird things here by calling `beforeRegister` on an `HTMLElement` instead of the `TestComponent` instance, but the arrow function is working as expected. — Bergi, Jun 03 '16 at 08:31
Ok, just examined, that deactivating babel leads to the same error. Than it is a Polymer bug, or an intended behavior? This still would be interesting for me, so maybe reformulate the question? — SeDav, Jun 03 '16 at 08:39
OK, I've removed any reference to arrow functions from the question, it should be a reasonable question about Polymer now. — Bergi, Jun 03 '16 at 08:57
I'm not seeing the issue here still.. is it no different to how jQuery methods work? Using an arrow function in `$(el).each(() => this)` will break because jQuery is written in a way that access the rebound object. — azium, Jun 03 '16 at 16:11

tony19 · Accepted Answer · 2016-06-03T23:36:08.820

Instead of using beforeRegister() to add is and properties to the class, you could declare getters, which would allow you use the ES6 syntax for object values:

class TestComponent {
  get is() { return 'test-component' }

  get properties() {
    return {
      _testElement: {
        type: Object,
        value: () => this.$.testElement
      }
    }
  }

  ready() {
    console.log('ready', this._testElement);
  }
}

Polymer(TestComponent);

^codepen

`this` keyword resolves to HTMLElement in Polymer in beforeRegister method

1 Answers1