Eu tenho um conjunto de elementos de polímero personalizados que gostaria de usar em um aplicativo angular 2.

Parece que há um problema relacionado à etiqueta de conteúdo do elemento polímero. O conteúdo do elemento é renderizado no local errado no elemento polímero, se o elemento estiver localizado dentro de um componente angular 2.

Exemplo:

O modelo do meu elemento de polímero "meu-botão" é assim:

<template>

  <button>
    <content></content>
  </button>

</template>

Use angular externo

Quando uso esse elemento fora do meu componente angular 2, obtenho o resultado esperado:

Usar:

<my-button>Foo</my-button>

Resultado:

<my-button>
  <button>
    Foo
  </button>
<my-button>

Use dentro do componente angular 2

Quando usado em um componente angular 2, o conteúdo sempre é renderizado no final do modelo de elementos. Assim como a tag de conteúdo não existia.

Usar:

<my-button>Foo</my-button>

Resultado:

<my-button>
  <button>

  </button>
  "Foo"
<my-button>

Pergunta, questão

O problema pode ser que o polímero e o angular 2 usem a tag content para a transclução. Então, talvez as coisas fiquem um pouco complicadas ao usar os dois juntos.

Eu adoraria usar todos os meus elementos de polímero dentro do angular 2. Portanto, qualquer idéia de como corrigir isso seria muito apreciada.