Extending class Polymer

Question

I am trying to extend the class of an element onto another custom element so that I can access properties from the first custom element.

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../src/data-model/data-model.html">

<dom-module id="pkg-view">
  <template>
    <style>

    </style>

    <data-model id="dm"></data-model>
    <vaadin-table-new></vaadin-table-new>
  </template>

  <script>
   class PkgView extends DataModel {
   static get is() { return 'pkg-view'; }
   static get properties() {
     return {
      conf_package: {
       type: Object
      }
     }
   }
 };

customElements.define(PkgView.is, PkgView);
  </script>
</dom-module>

As you can see the, custom element I am trying to extend is DataModel however, when I try and run this I get the following error with a reference to the first line in my script tag:

Uncaught ReferenceError: DataModel is not defined

I am sure the import path is correct. I have not extended elements before, is there anything glaringly obvious missing? TIA

NB: I have been following instructions from:

https://www.polymer-project.org/2.0/docs/devguide/custom-elements#extending-other-elements

Answer 1

It appears that data-model.html is not exposing the class definition of DataModel (e.g., adding it to window). A more flexible approach than referencing the class directly is to extend the constructor returned from customElements.get(). In your case, you could do:

class PkgView extends customElements.get('data-model') { ... }

demo