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

回答1:

There are a few open issue about Angular2 combined with Polymer. For example Angular doesn't use Polymer.dom(el)... for manipulating a Polymer elements children. This is probably what breaks your components. A workaround is to enable full shadow DOM and polyfills. See https://www.polymer-project.org/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 components.

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

回答2:

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

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

Tutorial (draft): https://github.com/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.com/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.com/docs/

来源：https://stackoverflow.com/questions/34779175/polymer-elements-within-angular-2-component

标签

javascript

html

polymer

angular

web-component