MDL on dynamic websites downgrading

Question

We have a old large ajax based GUI adapted to MDL. The whole page content is build dynamically (from xml description).

componentHandler.downgradeElements( /all old notes/ ;
remove all old notes form DOM
add new page content to DOM
componentHandler.upgradeAllRegistered();

This works fine, but it leaks memory if the component MaterialLayout is alos created dynamically . With the "downgrading fix (#2009" the internal references are removed.
The reason for the memory leak is that the component MaterialLayout adds a listener to the MediaQueryList (MDL 1.1).

 this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));

In MDL 1.1.2 there are two windows event handler added which lead to the same problem.

window.addEventListener('pageshow', function (e) { ... } );
...
window.addEventListener('resize', windowResizeHandler);

This listeners are not removed by downgradeElements. And therefore the DOM elements are not GC.

Questions:

• Is it not indented to delete the element with MaterialLayout?
• Is it completely wrong what I doing here?
• Is this an MDL issue?
• Is there a workaround without changing MDL code?

Answer 1

There was a issue report for MDL Layout downgrade #1340

The final conclusion was:
MDL is geared towards stateless sites with 1.x. Destroying the entire layout is not something that was thought about during the initial build of the layout component.

So right answer is:
It is not indented to delete the element with MaterialLayout for MDL 1.x.

Additional information:
For a hack work around (for testing) I removed adding the MediaQueryList listener from material.js (still 1.0.4 with deconstructComponentInternal form 1.1.2). This seems to work for our solution. I did not found any drawbacks (again in our solution) up to now.