javascript - Polymer elements within angular 2 component

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 ponent.

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 ponent, 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 ponent

When used within an angular 2 ponent, 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.

I have a set of custom polymer elements, that I would like to use within an angular 2 application.

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 ponent, 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 ponent

When used within an angular 2 ponent, 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.

Share Improve this question edited Jan 13, 2016 at 23:45 asked Jan 13, 2016 at 23:40 Simon 2964 silver badges17 bronze badges

1 Have you tried listening to the WebComponentsReady event before applying any angular scripts? – Neil John Ramal Commented Jan 14, 2016 at 2:35

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

There are a few open issue about Angular2 bined with Polymer. For example Angular doesn't use Polymer.dom(el)... for manipulating a Polymer elements children. This is probably what breaks your ponents. A workaround is to enable full shadow DOM and polyfills. See https://www.polymer-project/1.0/docs/devguide/settings.html

An issue I haven't found a solution yet is passing <template>s (like required for example for <iron-list>. Angular handles templates on its own and doesn't pass it to the Polymer element.

~~There is a ngNonBindable directive. I haven't tried it yet on the <template ngNonBindable> myself but it might work.~~ I tried it seems that's only to ignore [prop]="field"/prop="{{field}} bindings.

Another issue is with <style is="custom-style">. They can only be added in the <head> element or within Polymer elements, but not to Angular ponents.

See also Two-way binding in Angular 2 with NgModel and mutating bound property?

Check out https://www.npmjs./package/@vaadin/angular2-polymer, which should resolve most issues in integrating Polymer elements to Angular 2.

User guide: https://github./vaadin/vaadin-core-elements/blob/master/docs/angular2.adoc

Tutorial (draft): https://github./vaadin/angular2-polymer/blob/d4581e8fd82841eea84ef40e16e262a12ee4b082/docs/tutorial.adoc

Better shady DOM support is waiting to be merged from a separate branch (should be merged and released within two weeks): https://github./vaadin/angular2-polymer/tree/feature/polymer-dom-adapter

It would be great if you could try it out and see if it works for you!

Eventually, the documentation will be published at https://vaadin./docs/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Polymer elements within angular 2 component - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)