Ember.js: ember is not rendering polymer elements

i tried this with ember 1.12 and 1.13 beta2

I was surprised to see that everything works fine in IE and Firefox but not on chrome.

i believe those other browsers may fall back to polyfils, for things that chrome already implements.

Yes, im currently using polymer dom = shadow instead of shady(https://www.polymer-project.org/1.0/docs/devguide/settings.html) and almost worked, except for a few elements

the best chance of some-one tackling this is to provide an example that demonstrates the issue.

forget my last comment, that config actually makes things more buggy.
There is another guy having same problems:
https://github.com/thijsvdanker/ember-polymer

Hey @stefanpenner i have uploaded the demo i was testing to github and gh-pages.
Here is the repository:
https://github.com/matheusdavidson/ember-polymer

and here is gh-pages:
http://matheusdavidson.github.io/ember-polymer/

As you can see, elements in index.html render as expected, but inside application.hbs, content does not goes into the right insertion point.

I'm having the same issue. In my repository (https://github.com/thijsvdanker/ember-polymer) there are two routes: 1 with the paper-toolbar component, and one with a wrapped version.
The demo is visible here: http://bitsnbolts.nl/ember-polymer/

The first time you click the paper-toolbar version, the Title is rendered outside of the toolbar, but if you go to the poly-toolbar (which works) and than back to the paper-toolbar then it does work.

Same problems - ref. https://github.com/peec/ember-cli-polymer/commits/feature/polymer-support , and it works with firefox (not with chrome).

Edit:
I tried test with all of these ember versions (and none of them works with polymer 1.0):
1.10.0, 1.11.0, 1.13.0 and 2.0.0-beta.1

Also if you try import e.g. the paper-header-panel polymer component like this in e.g. _application.hbs_:

<paper-header-panel class="flex">
    <paper-toolbar>
        <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
        <div class="title">Polymer</div>
    </paper-toolbar>
</paper-header-panel>

The rendered result is:

<paper-header-panel mode="standard" class="flex x-scope paper-header-panel-0">

    <div id="mainContainer" class="flex style-scope paper-header-panel">

    </div>

    <paper-toolbar role="toolbar" class="x-scope paper-toolbar-0">

    <div id="topBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">

    </div>

    <div id="middleBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">

    </div>

    <div id="bottomBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">

    </div>


        <paper-icon-button role="button" tabindex="0" aria-disabled="false" icon="menu" on-tap="menuAction" class="x-scope paper-icon-button-0">
    <paper-ripple id="ink" class="circle style-scope paper-icon-button" center="">
    <div id="background" class="style-scope paper-ripple"></div>
    <div id="waves" class="style-scope paper-ripple"></div>
  </paper-ripple>
    <iron-icon id="icon" class="style-scope paper-icon-button x-scope iron-icon-0"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" class="style-scope iron-icon"></path></g></svg>
    <iron-meta id="meta" type="iconset" class="style-scope iron-icon"></iron-meta>
  </iron-icon>
  </paper-icon-button>
        <div class="title">Polymer</div>
    </paper-toolbar>
</paper-header-panel>

However, the result should really be like this (works if you put the same polymer component inside the _index.html_ file (e.g. before "content-for").

<paper-header-panel class="flex x-scope paper-header-panel-0" mode="standard">
    <paper-toolbar class="has-shadow x-scope paper-toolbar-0" role="toolbar" aria-labelledby="paper-toolbar-label-2114">

    <div id="topBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">
      <paper-icon-button icon="menu" on-tap="menuAction" role="button" tabindex="0" aria-disabled="false" class="x-scope paper-icon-button-0">
    <paper-ripple id="ink" class="circle style-scope paper-icon-button" center="">
    <div id="background" class="style-scope paper-ripple"></div>
    <div id="waves" class="style-scope paper-ripple"></div>
  </paper-ripple>
    <iron-icon id="icon" class="style-scope paper-icon-button x-scope iron-icon-0"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" class="style-scope iron-icon"></path></g></svg>
    <iron-meta id="meta" type="iconset" class="style-scope iron-icon"></iron-meta>
  </iron-icon>
  </paper-icon-button><div class="title" id="paper-toolbar-label-2114">Polymer</div>
    </div>

    <div id="middleBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">

    </div>

    <div id="bottomBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">

    </div>

  </paper-toolbar>
    <div id="mainContainer" class="flex style-scope paper-header-panel">

    </div>
  </paper-header-panel>

As one can see in the first sample vs the correct one above, it doesn't move the respective components recursively into the "id=topBar element".

So my conclusion is that it doesn't move the dom elements to the correct position if you render these components via the *.hbs files.

Works for me in Chromium & Firefox if I:

1. use Polymer global setting window.Polymer.dom = 'shadow';
2. include webcomponents-lite.js (_not_ webcomponents.js)

Versions tested:

• Ember JS 1.13.3
• Polymer 1.0.7
• Chromium 43
• Firefox 38

@bjornharrtell Can you provide an example project that has Ember 1.13+ working with Polyer 1.0+?

Forked the example repo from peec with the needed mods - https://github.com/bjornharrtell/ember-cli-polymer.

There still seem to be some issues with some of the elements such as paper-radio-button and paper-checkbox, but I think this is an issue on the Polymer side and not Ember (see https://github.com/PolymerElements/paper-radio-button/issues/26).

Polymer elements that doesn't use <content> works, paper-radio-button, checkbox, drawer panel and others that use <content> do not work! (see https://github.com/PolymerElements/paper-radio-button/blob/master/paper-radio-button.html#L59)

Can confirm what @matheusdavidson reports in Chrome. However, it seems to work in Firefox. I suspect Ember JS and/or Polymer incompatibilities involving the built in shadow dom in Chrome (un-educated guess though).

I've tried in all browsers, none of them works. Depending on your config(shadow or shady dom) it will look like is working, but after you transition into routes you'll see the same bug in all browsers!

I tried to use ember + polymer for a month with no success, i was told that polymer members are trying to create an interop to get things working but it should take some time.

From what I've been able to see, the main issue is related to when Polymer's ready callback fires. Basically, if the polymer element is getting generated dynamically (say by glimmer), then ready will fire before the content is available. We've been able to work around the issue by monkey patching the broken components to use the attached callback instead of ready, which fires when the element is actually inserted into the page dom.

Thanks for that insight @dnegstad.

Is there currently a workaround to use for instance the paper-input element from Polymer inside Ember? Or are we in the dark here.

I concluded to use ember-paper addon instead which uses css from angular
material (which goes though googles ux team for validation).

1. aug. 2015 17.02 skrev "Steffen Brem" [email protected]:

Is there currently a workaround to use for instance the paper-input
element from Polymer inside Ember? Or are we in the dark here.

—
Reply to this email directly or view it on GitHub
https://github.com/emberjs/ember.js/issues/11361#issuecomment-135798311.

It's probably wise to set up some failing tests for this, in order to stimulate development on solving the issue.

Revisited this yesterday and with up to date versions of the involved packages I can no longer reproduce any issues in Chrome or Firefox.

Thanks for the heads up @bjornharrtell, I just did some tests with up to date packages as well. Whilst Safari and Firefox worked fine, Chrome only rendered correctly with Shadow DOM. Were you using Shady- or Shadow DOM?

I have only tested with Shadow DOM.

I am closing this issue as after reading the discussion it seems more like a Chrome/Polymer issue than an Ember issue, feel free to correct me though.
Feel free to re-open the issue if you think it's still justified, thank you!

The issue still exists with paper-checkbox and paper-radio-button and this happens only when transitioning between routes. Initially the components render fine, but after transitioning to another route and coming back, the components are broken. Here's the working example where you can see the issue.
http://codepen.io/jaichandra/pen/jrOpab?editors=1010

paper-button and paper-input seems to work fine. Also, if I switch to Shadow DOM, the components work.

Not sure if this is a polymer issue, as the components work well in Angular and Polymer projects. I am thinking it could be an issue with how a view is re-rendered during route transitions. If you look at the rendered paper-checkbox dom, it get re-rendered inside one of its own nodes (after route transition), causing it to render two checkboxes and break. Same is the case with paper-radio-button.

Jai, try configuring polymer to use shadow dom. It should resolve some or
all issues.

On 9 Sep 2016 19:57, "Jai Chandra" [email protected] wrote:

The issue still exists with paper-checkbox and paper-radio-button and
this happens only when transitioning between routes. Initially the
components render fine, but after transitioning to another route and coming
back, the components are broken. Here's the working example where you can
see the issue.
http://codepen.io/jaichandra/pen/jrOpab?editors=1010 http://url

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/emberjs/ember.js/issues/11361#issuecomment-245990056,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAtb7sIcwoTLEX57KkP0jLZVx0xdqEmdks5qoZ4RgaJpZM4E6Zsu
.

@dunnkers enabling Shadow DOM fixes the issue. But I don't think anyone is ready to use shadow DOM yet, because of browser compatibility and performance issues with polyfill.

Everytone, who intersted, how to work with the Polymer and Ember:

Look, ma, it works: http://codepen.io/github-polymer-user/pen/jrWyrp

@jaichandra You even do not need to enable Shadow DOM, really:

http://codepen.io/github-polymer-user/pen/jrWyrp

Thanks @github-polymer-user. But, I still think there's some work needed. Wrapping a Polymer component as another Polymer component doesn't look right. And other components (paper-input and paper-button) work without wrapping.

Hi guys, i tried to work with ember and polymer in many ways, none of them was 100%. Best advice i have is: don't.

Try to use ember libraries such as ember paper, ember materialize.

I decided to go with angular + angular material and im happy today :)

For importing Polymer into Ember you guys can use ember-polymer. This might make the process a lot easier for some people.

@jaichandra, You really did not understand what is going on:

At first, wrapping Polymer elements into Polymer elements is perfectly 100% correct.
At second, This is not as simple as it seems, because of component initialization.
At third, you are usung Ember in sample which is actually have different handlebars idiom usage, than in Polymer, these mixins of Polymer components an Ember views and controllers are so much more confusing.

At last, you do not have to use server-side capable, SEO ready (FastBoot), framework aside Polymer elements, which is also are client-side 100% pure Web components (but Ember elements aren't).

I'm not wrapping Polymer, I was showing you that DOM manipulation differs starting from these two framework initialization sequences, because they are conflicting for DOM resorces in one mixin-styled component written by you.

Shadow DOM for Polymer and Ember differs, so you have to choose which pattern is best for you, but not both. You mentioned that other components is still works, but this is just because you didn't put any usage of component's Shadow DOM.

You will take a 100% trouble every time, since you use transformations in both Ember and Polymer. It still works when used differently: either Ember components (routes, controllers, views, etc.) or Polymer components (routes, controllers, views, etc.) but not both. In such case as you show us in sample, your comonents will work incorrectly because they initalised differently and work with different shadow DOMs respecively and, most important, is not aware of existence of each other's shadow DOM.

So this little code blocks in JS do the trick, and in my opinion the same:

It is better to distinguish between Polymer approach of component creation and Ember approach of declaration and initialization of components.

So, you have to use pure Polymer elements inside compound Polymer components, and create distinguised pure Ember components to utilise those Polymer elements.

Do not create mixins. Period.

@jaichandra, You have to close this issue. As I already show you, Ember is 100% correctly renders Polymer elements.

Untill you write mixin- components with Ember. Be 100% Ember and 100% Polymer, please, do not try to create monsters.

@dunnkers, I saw it (library) and think that it is really too strange for me. Everything I need i can create using either Polymer oe Ember, creation of MVC with partial V- on Polymer seems for me so strange, that I can't say why for the sake of God you have to use this library, that you have mentioned, but this is nice effort.

As of final words, I have to say, that Ember already supports FastBoot (server-side to client-side rendering switching as background process), server-side rendring and SEO, but Polymer as it utilize Web Conponents technology will probably never implement any of these features or it will take years to achieve (web components is strongly browser-based, and only 2 companies supports them now)

Ember is perfect solution for those who didn't like Facebook approach (JavaScript-first approach in their famous framework) and prefer component-based development with additional features like server-side rendering

Thanks @github-polymer-user for the detailed explanation. I get your point that this is an issue with the differences in Shadow DOM. I also see that they were trying to access DOM resources at the same level, which was causing conflicts.

While, I'm not negating any of your concerns on using Polymer and Ember together, and I agree that I can't leverage complete Ember features when using Web components, I think I figured the root cause of this specific problem, based on your code sample. I am now sure that the problem is with Polymer's <content></content> tag rendering.

If we modify your example like below, you'll see the same issue again.

Template:

<dom-module id="x-foo">
  <template>
     <paper-checkbox checked="{{checked}}"> <content></content> </paper-checkbox>
  </template>
</dom-module>

Usage:

<x-foo checked= {{model.isAdministrator}} {{action "updateStatus" on="change"}}>Select</x-foo>

Notice the addition of <content> tag in the template and how I am trying to pass the content from the <x-foo> element.

This is surely a polymer issue to fix. Appreciate your patience.