I have a set of custom polymer elements, that I would like to use within an angular 2 application.
It seems like there's a problem concerning the content tag of the polymer element. The content of the element gets rendered at the wrong place within the polymer element, if the element is located within an angular 2 component.
Example:
The template of my polymer element "my-button" looks like this:
<template>
<button>
<content></content>
</button>
</template>
Use outside angular
When I use this element outside of my angular 2 component, I get the result that I expected:
Use:
<my-button>Foo</my-button>
Result:
<my-button>
<button>
Foo
</button>
<my-button>
Use within angular 2 component
When used within an angular 2 component, the content always gets rendered at the end of the elements template. Just like the content tag didn't exist.
Use:
<my-button>Foo</my-button>
Result:
<my-button>
<button>
</button>
"Foo"
<my-button>
Question
The problem might be, that polymer and angular 2 both use the content tag for transclution. So maybe things get a little messy when using both together.
I would love to use all of my polymer elements inside angular 2. So any ideas on how to fix this would be very much appreciated.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
