Polymer.PropertiesMixin fails to create property accessors in IE11 for certain important names like "disabled"

[bashmish]

Description

Polymer.PropertiesMixin fails to create property accessors in IE11 for certain important names like disabled.

Live Demo

https://github.com/bashmish/bug-ie11-polymer-properties-mixin

Steps to Reproduce

Open tests and see what is failing in IE11 comparing to other browsers.

Expected Results

disabled has corresponding accessors that allow to react to changes.

Actual Results

No accessors are created for disabled.

Browsers Affected

This is not clear to me. I think that it's not only IE11 since the logic seems to be a little bit naive for how accessors are created. But in IE11 it's a way more problematic.

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

Versions

• Polymer: 2.6.0
• webcomponents: 1.2.0

[TimvdLippe]

This likely clashes because IE11 has a property accessor defined for this property: http://jsbin.com/duzeloj/edit?html,console,output

[sorvell]

In general creating property accessors for native properties like disabled is (unfortunately) not supported. It looks like we failed specifically to list disabled in the docs related to this here: https://www.polymer-project.org/2.0/docs/devguide/data-binding#native-binding. We'll leave this issue open so we can address the docs.

[TimvdLippe]

This issue was moved to Polymer/old-docs-site#2510

[sorvell]

On second thought disabled should not be native for normal elements (only for form based elements) so it should generally work.

[sorvell]

Ok, we traced this down. It appears that IE defines disabled on HTMLElement. This is unique (and seems incorrect) and is the root of the issue.

PropertiesChanged.createProperties used by PropertiesMixin to create property accessors does not overwrite existing accessors. We do this to make creating your own accessors straightforward. Note that returning the property from static get properties does 3 things (1) observes it as an attribute, (2) ensures the attribute value gets reflected to the property transformed to the given type, (3) creates a property accessor (if one does not already exist on the element prototype).

However, for backwards compatibility we customize this behavior for Polymer.Element and do overwrite existing accessors. This is why the behavior is different there.

As a workaround, you can manually call MyClass.prototype._createPropertyAccessor('disabled') before defining the element. Here's an example (jsbin won't work in IE but the code should):

http://jsbin.com/kudehimofa/edit?html,console,output

[bashmish]

Thanks a lot for detailed explanation. As a temporary workaround I was already thinking about smth like that, but was not sure if it was a safe thing to do.

Do I understand correctly that you don't want to support IE11 disabled in PropertiesMixin? Or if you reopened this, you gonna investigate further? So what's the plan?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!