default value setting of _meta property causes 'this._meta.byKey' undefined error

[rpapeters]

Description

The iron-icon element causes a 'this._meta.byKey is not a function' error. The value of the _meta property gets a default value by creating an iron-meta element. Creation of this iron-meta element might occur even before the iron-meta element has been defined in the customElementRegistry.

Expected outcome

No error happening.

Actual outcome

'this._meta.byKey is not a function' error.

Steps to reproduce

This happens very occasionally, so reproducing is a problem here. I Do have a solution though;
Instead of immediately assigning the default value like this:
_meta: { value: Polymer.Base.create('iron-meta', {type: 'iconset'}) }

Wrap the creation of iron-meta in a function like this:

_meta: { value: function () { return this.constructor.__meta ? this.constructor.__meta : this.constructor.__meta = Polymer.Base.create('iron-meta', {type: 'iconset'}); } }

This way the default value will only be set as soon as the first element is created. I guess it will only work for Polymer 2 since I'm using this.constructor for remembering the iron-meta instance.

Browsers Affected

All

[nicolethenerd]

This can be reproduced consistently in Firefox. However, the recommended fix doesn't seem to work - it breaks iron-icon for me entirely.

[madhur29shah87]

Have this issue in Polymer 3 Angular 7/ Angular 5 integration after following guideline for integration https://www.npmjs.com/package/@codebakery/origami
Issue can be reproduced on Chrome as well.

[nicolethenerd]

I ended up resolving this by removing the Polymer v1 web components Polyfill, which I no longer needed since I had upgraded to Polymer 2. Check to make sure you're not still including an old polyfill.