Errai 4.0 Beta1 Polymer rendering problem with Chrome 49

[aanderson1776]

Hi,

I am trying to use Errai 4.0 Beta1 to render the Polyer App Layout https://polymerlabs.github.io/app-layout/ demo #6. I was able to get the page to render but the menu items are not rendering correctly in Chrome. Using the Chrome web developer tool inspect element feature it appears additional DOM elements are being inserted but due to both gwt and polymer dynamically updating the DOM I have no clue how this is happening. I created this example project https://github.com/aaronanderson/polyerr.git to illustrate the difficulties I am having. Just check it out and run mvn clean install wildfly-swarm:run and click either the static or errai link.

The static page renders fine in Chrome and Firefox and oddly enough the errai page renders fine in Firefox.

Also I override the onload method to inject a javascript event listener and the onload method appears to be called twice. The first time it is executed the gwt $doc variable is not available.

Any idea what could be happening? it is a shadow dom problem?

[aanderson1776]

I reverted to Errai 3.2.3 and the issue still exists with Chrome although I did confirm that IE 11 properly renders the page like Firefox. After enabling finest level GWT logging I believe I discovered what the issue is. In TemplateUtil.getRootTemplateElement when the template is created using

Element parserDiv = DOM.createDiv();

parserDiv.setInnerHTML(templateContents);

Chrome actually renders the Polymer components instead of storing the raw template HTML, i.e.

<app-drawer swipe-open></app-drawer>

in the Errai template HTML is logged as

<app-drawer class="x-scope app-drawer-0" position="left" swipe-open="">

    <div style="" class="style-scope app-drawer" id="scrim"></div>

    <div style="" class="style-scope app-drawer" id="contentContainer">  

    </div>

  </app-drawer>

.Then when the template is cloned with the cloneWithEmptyParent() method the Polymer elements are rendered a second time, i.e.

<app-drawer swipe-open="" style="touch-action: pan-y;" position="left" class="x-scope app-drawer-0">

    <div id="scrim" class="style-scope app-drawer"></div>

    <div id="contentContainer" class="style-scope app-drawer">

    <div id="scrim" class="style-scope app-drawer" style="transition-duration: 0s;"></div>

    <div id="contentContainer" class="style-scope app-drawer" style="transition-duration: 0s;"></div>

    </div>

  </app-drawer>

which leads to the duplicate elements I encountered. This behavior seems inconsistent between browsers and my require a fix in Chrome/GWT outside of Errai.

[aanderson1776]

Apparently there is a global Polymer setting that instructs Polymer to use the shadow DOM, natively supported in Chrome, instead of the default shady DOM:

Global Polymer settings - Polymer 1.0

<script src="assets/webcomponentsjs/webcomponents-lite.js"></script>

<script>

  window.Polymer = {

  dom : 'shadow',

  lazyRegister : true

  };

</script>

Finally with this setting enabled the Polymer elements in Errai templates rendered correctly in Chrome, Firefox, and Edge.