custom tags are losing their children

[treblereel]

Hi all, I'm faced with a very strange behavior, so let me share it with you.

I have tried an amazing element2 demo with polymer widget errai-tutorial (https://github.com/errai/errai-tutorial.git), but I added iron-icon to the paper-input as it's described in polymer examples https://www.webcomponents.org/element/PolymerElements/paper-input. But, according to a debug message, it disappears.

<div data-field="contact">
  <paper-input label="username">
  <iron-icon slot="prefix" src="img/errai.png"></iron-icon>
  <div slot="suffix">@email.com</div>
  </paper-input>
</div>

<paper-input label="username" tabindex="0" aria-disabled="false">
<paper-input-container class="style-scope paper-input">
<template is="dom-if" class="style-scope paper-input-container"></template>
<div class="input-content style-scope paper-input-container">
<div class="label-and-input-container style-scope paper-input-container" id="labelAndInputContainer" style="position: relative;">
<label aria-hidden="true" for="input" class="style-scope paper-input">username</label><input is="iron-input" id="input" class="style-scope paper-input" autocomplete="off" placeholder="" autocapitalize="none" autocorrect="off" aria-describedby="" aria-labelledby="" tabindex="0"><template is="dom-if" class="style-scope paper-input"></template><template is="dom-if" class="style-scope paper-input"></template>
</div>
</div>


<div class="underline style-scope paper-input-container">
<div class="unfocused-line style-scope paper-input-container"></div>
<div class="focused-line style-scope paper-input-container"></div>
</div>


<div class="add-on-content style-scope paper-input-container"></div>
</paper-input-container>
</paper-input>
</div>

Maybe I'm doing something wrong ? Thanks for help !

PS: reproducer errai-tutorial.tar.xz

[mbarkley]

Hi Dmitri,

When Errai creates a component it replaces the element from your template with the corresponding @DataField in your templated bean, so you are having the paper-input with the iron-input inside it replaced with a paper-input with no content. For some kinds of @DataFields (like Widgets implementing HasHtml) Errai would preserve the child elements, but we haven't yet implemented anything like this for elements.

A temporary solution is to programmatically add an iron-input as a child of your PaperInput, or to not use a @DataField and programmatically lookup your PaperInput from your template with a query selector. A better long-term solution is to open a JIRA for a feature for new API to support this. In particular, we had a feature added in Errai 4 to support configuring the merge strategy for attributes of elements in the @DataField annotation. It might make sense for @DataField to have an attribute as well to specify whether the child-content of an element should be preserved.