Tranclusion dupes polymer elements. #12410
Description
I've noticed an issue with directives that transclude content that contains a paper element, in my case, a paper button. Because transclude clones the content, polymer performs the shadow DOM expansion twice, which results in a paper button inside a paper button.
Initially, the html being transcluded is written as follows:
<paper-button>[content]</paper-button>
Once the html is rendered, before angular is loaded, polymer expands the element in the following way:
<paper-button>
<paper-ripple/>
<paper-material>
[content]
</paper-material>
</paper-button>
That's fine, but then transclude clones the element and copies it into the destination div, which causes polymer to expand the <paper-button> element again, resulting in the following structure:
<paper-button>
<paper-ripple/>
<paper-material>
<paper-ripple/>
<paper-material>
[content]
</paper-material>
</paper-material>
</paper-button>
This is clearly not the desired outcome. In my testing, moving an element around the DOM does not cause this to occur, but cloning the element and then inserting the clone into the DOM causes polymer to expand the element all over again. This doesn't seem to be an issue with Polymer but with the way transculsion works, but I'm definitely open to suggestions and curious if there is a viable solution out there. So far the only work-around I've found is to add a prefix to the <paper-button> tag, preventing the initial expansion and then removing it in the transclude function. Painful, I know.