Полимерные элементы внутри углового 2 компонента

У меня есть набор пользовательских полимерных элементов, которые я хотел бы использовать в приложении angular 2.

Похоже, есть проблема с тегом содержимого полимерного элемента. Содержимое элемента отображается в неправильном месте внутри полимерного элемента, если элемент расположен внутри компонента angular 2.

Пример:

Шаблон моего полимерного элемента "my-button" выглядит так:

<template>

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

</template>

Использовать внешний угол

Когда я использую этот элемент вне моего компонента angular 2, я получаю ожидаемый результат:

Использовать:

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

Результат:

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

Использовать в компоненте angular 2

При использовании в компоненте angular 2 содержимое всегда отображается в конце шаблона элементов. Точно так же, как тег содержимого не существовал.

Использовать:

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

Результат:

<my-button>
  <button>

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

Вопрос

Проблема может заключаться в том, что и полимер, и угловой 2 используют тег содержимого для преобразования. Так что, возможно, все становится немного грязным при использовании обоих вместе.

Я хотел бы использовать все свои полимерные элементы внутри angular 2. Поэтому любые идеи о том, как это исправить, будут очень признательны.