customElements.get() to extends custom elements

[bmodeprogrammer]

Description

I'm using customElements.get() to extends elements, and even if compile with poolymer cli with polymer build --js-compile or polymer serve only works all on chrome and opera except the paper-tabs extended, even in firefox does not work.

Example of component:

<link rel="import" href="../paper-tabs/paper-tabs.html">
<script>
  class MyTabs extends customElements.get('paper-tabs') {
    static get is() {
      return 'my-tabs';
    }
  }

  window.customElements.define(MyTabs .is, MyTabs );
</script>

index.html importing the polyfills:

<div id="autogenerated-ce-es5-shim">
    <script type="text/javascript">
      if (!window.customElements) {
        var ceShimContainer = document.querySelector('#autogenerated-ce-es5-shim');
        ceShimContainer.parentElement.removeChild(ceShimContainer);
      }
    </script>
    <script type="text/javascript" src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
  </div>
  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>

Edge -->

Firefox-->

IE -->

Chrome

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Polymer: "polymer#^2.0.0-rc.1" but I did update now, and current is the rc.7
• webcomponents: "webcomponents/webcomponentsjs#^1.0.0-rc.4"

[dfreedm]

Hmm, this is interesting!
This is might be related to the HTMLImports polyfill, maybe @valdrinkoshi will know more.

However, if you use this setup, it will work in all browsers:

<link rel="import" href="../paper-tabs/paper-tabs.html">
<script>
  customElements.whenDefined('paper-tabs').then(() => {
    class MyTabs extends customElements.get('paper-tabs') {
      static get is() { return 'my-tabs' }
    }
    customElements.define(MyTabs.is, MyTabs);
  });
</script>

Here is an example on Plunker: http://plnkr.co/edit/IeZk7sluWySWnqeWuOlt?p=preview

[dfreedm]

Or maybe @bicknellr would know if this is a CustomElements polyfill issue.

[bicknellr]

This seems like a HTML Imports polyfill thing: native imports are able to guarantee that scripts in the main document are run after scripts in <link rel="import">s before them but, to my knowledge, this behavior isn't polyfillable because by the time the scripts exist and are in the document (which is the earliest the polyfill could learn about them) the scripts have already run.

@azakus, your workaround using customElements.whenDefined is probably the safest way to handle writing extensions in the main document of elements defined in imports. There's also the option to put all of your element definitions in imports and they'll be run in the order you expect.

[dfreedm]

Edit: nvm, seems that `whenDefined` wasn't needed in my example after all: http://plnkr.co/edit/tAoZvZZLAaPTxVxfAAiz?p=preview

[dfreedm]

@bmodeprogrammer can you confirm if your class that extends customElements.get('paper-tabs') is in the main document, or in a document that was imported?

[bmodeprogrammer]

@azakus the definition of the object is in a imported file, and I have the tag on index. this is the index page.

<paper-textarea label="Paper textarea"></paper-textarea>
<paper-tabs selected="0">
    <paper-tab>TAB 1</paper-tab>
    <paper-tab>TAB 2</paper-tab>
    <paper-tab>TAB 3</paper-tab>
</paper-tabs>

<my-checkbox name="check" value="cheese" required="" auto-validate=""></my-checkbox>
<my-textarea label="My Textarea" name="texarea" required="" auto-validate=""></my-textarea>
<my-picklist label="Dinosaurs" required="" name="picklist" auto-validate="">
    <my-listbox class="dropdown-content">
        <my-item value="allosaurus">allosaurus</my-item>
        <my-item value="brontosaurus">brontosaurus</my-item>
    </my-listbox>
</my-picklist>
<my-input label="Test" name="input" required="" auto-validate=""></my-input>
<my-radio-group selected="large" name="radio">
    <my-radio-button name="small">Small</my-radio-button>
    <my-radio-button name="medium">Medium</my-radio-button>
    <my-radio-button name="large">Large</my-radio-button>
</my-radio-group>
<my-slider name="slider"></my-slider>
<my-toggle-button name="toggle"></my-toggle-button>
<my-phone-input name="cenas" label="Cenas" country-code="351" phone-number-pattern="XXX-XXX-XXX" char-counter="" required="" auto-validate="" error-message="invalid number!" prevent-invalid-input=""></my-phone-input>

<button type="reset">Reset</button>
<my-button raised="" >Reset</my-button>
<my-button raised="">Submit</my-button>
<my-tooltip></my-tooltip>

<my-progress indeterminate=""></my-progress>
<my-spinner active=""></my-spinner>
<my-toast id="cenas" text="Hello world!"></my-toast>
<my-icon-button icon="favorite"></my-icon-button>
<my-icon icon="menu"></my-icon>
<my-badge></my-badge>
<my-tabs selected="0">
    <paper-tab>The first tab</paper-tab>
    <paper-tab>Tab two</paper-tab>
    <paper-tab>The third tab</paper-tab>
    <paper-tab>Fourth tab</paper-tab>
</my-tabs>

Update

I added this customElements.whenDefined('paper-tabs').then(() => { is all elements and happen some changes. The paper textarea gets better on firefox, on edge stays the same. The icons now only work on chrome and opera. The "my-tabs" that extends "paper-tabs" does not work in any of the browsers. And all "my-components" are extended by "paper-components" except the "phone input" that is extends by "gold-phone-input". I left the updated print screens here.

chrome

firefox

Edge

IE 11

I have all the latest version of each browser. And my windows is the windows 10 creators update.

Update

have this error 6x too on console. Chrome.

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at HTMLElement._listenKeyEventListeners (iron-a11y-keys-behavior.html:430)
    at HTMLElement.attached (iron-a11y-keys-behavior.html:327)
    at HTMLElement.attached (class.html:206)
    at HTMLElement.attached (class.html:204)
    at HTMLElement.attached (class.html:204)
    at HTMLElement.attached (class.html:204)
    at HTMLElement.attached (class.html:204)
    at HTMLElement.attached (class.html:204)
    at HTMLElement.connectedCallback (legacy-element-mixin.html:70)

Edge Takes too long to load and has these errors:

HTML1300: Navigation occurred.
Components
Current window: 127.0.0.1/components/Components
SCRIPT28: Out of stack space
webcomponents-hi-sd-ce.js (118,477)
undefined
Components (66,35)
SCRIPT2343: Stack overflow at line: 53

IE 11 Takes too long to load and has no console error
Firefox:
TypeError: can't convert undefined to object on iron-keys-behavior file too

[iSuslov]

So what is the status of this issue? What is the proper way to extend custom elements (Paper, App) in Polymer 2.0?

[TimvdLippe]

Thanks for the issue. It has been a great while since this issue was opened. Sadly, this issue misses a live reproduction with Polymer 2 for us to be able to debug and potentially fix. Polymer 2 fixes a large amount of issues, probably including this one as well.

Please see CONTRIBUTING.md for guidelines on filing issues. You can start from this jsBin template as a starting point and link it in the issue template under "Live Demo".

Feel free to file a new issue following these instructions if you can still reproduce this issue with Polymer 2. Thank you!

For more documentation about extending custom elements, check out https://www.polymer-project.org/2.0/docs/devguide/custom-elements#extending-elements