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.

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.