search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.5k stars 783 forks source link

Decorating an extended element breaks in polyfilled browsers #459

Closed mattdsteele closed 6 years ago

mattdsteele commented 6 years ago

Stencil version:

 @stencil/core@0.2.3

I'm submitting a:

Current behavior: So I'd like to extract some common behavior from a few components. My intention was to use mixin classes to accomplish this. This pattern requires extending a class, e.g. class Foo extends withBar()

I'm finding that in polyfilled browsers (Firefox, IE11, Edge), extending any Stencil component causes weird errors, like failing to render at all. This is true even for simple things like class Foo extends Object. I don't see any compiler or run-time errors.

In Chrome it's working fine.

Steps to reproduce:

  1. Clone and npm i https://github.com/mattdsteele/stencil-extended-elements
  2. npm run dev --es5
  3. Open in Firefox and note the <my-component> element, which extends Object, does not render.

Other information:

Other issues make me think this should be possible: https://github.com/ionic-team/stencil/issues/133#issuecomment-327350839, https://github.com/ionic-team/stencil/issues/272

adamdbradley commented 6 years ago

Related: https://github.com/Microsoft/TypeScript/issues/13819

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!