detached is called when an element with disable-upgrade is removed from the page

[ghost]

Description

When removing an element with disable-upgrade from the page the detached method gets called. This can lead to errors if the detached method of the element or its behaviors relies on initialized properties (e.g. PolymerElements/iron-a11y-keys-behavior#71).

In my opinion detached should never be called if the element has disable-upgrade on it.

Live Demo

Thanks to @valdrinkoshi for the jsbin:
http://jsbin.com/miqoxuf/3/edit?html,console,output

Steps to Reproduce

1. Create an element with disable-upgrade on it.
2. Remove the element from the page.

Expected Results

detached is not called, because the element has disable-upgrade on it.

Actual Results

detached is called and can lead to errors.

Browsers Affected

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

Versions

• Polymer: v1.8.1 and v1.9.1
• webcomponents: v0.7.24

[valdrinkoshi]

Yes, this looks like a bug, since detached shouldn't be called without a prior attached.

Just to understand better the use case: why are you detaching an element before it gets even upgraded? This looks like something that might lead to poor performance anyways, since you're creating elements in the wrong spot in the first place, right?

[ghost]

Some parts of our single-page app are initially not visible but can become visible via user interaction. We heavily improved our performance by using disable-upgrade on elements within these parts and removing disable-upgrade only when the element becomes visible.
If the user navigates to another view within the page, the old content gets replaced via Ajax. This can lead to the removal of elements with disable-upgrade from the page.

We would like this issue to be fixed in a future Polymer update but since we are only experiencing problems in combination with the iron-a11y-keys-behavior a quick workaround there would be nice. That's why I submitted a quick little workaround in this pull request: PolymerElements/iron-a11y-keys-behavior#71.

[valdrinkoshi]

Thanks for the clarification 👌
Unfortunately we cant afford to have a workaround on iron-a11y-keys-behavior and ship a new version, as this bug might affect any polymer element doing stuff on detached.
I can only think of app side workarounds like overriding the detached method on the instance causing troubles, but meh, not great.

@sorvell @kevinpschaaf any suggestions?

[kevinpschaaf]

Agree this is a bug, and it should be pretty easily fixable in Polymer 1.x.

However, it does point out a flaw in Polymer 2 class-based syntax, in that there is no easy way to prevent connectedCallback or disconnectedCallback from running, since we don't use indirection as we did in 1.x. As such we're electing to remove the disable-upgrade from 2.x before final release, and will likely re-introduce it in a different form separate from the core library.

[kevinpschaaf]

Resolved in 1.x via #4607