-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ember is not rendering polymer elements #11361
Comments
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. |
Hey @stefanpenner i have uploaded the demo i was testing to github and gh-pages. and here is gh-pages: 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 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: 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:
Versions tested:
|
@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 PolymerElements/paper-radio-button#26). |
Polymer elements that doesn't use |
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 |
I concluded to use ember-paper addon instead which uses css from angular
|
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. |
The issue still exists with
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 |
Jai, try configuring polymer to use shadow dom. It should resolve some or On 9 Sep 2016 19:57, "Jai Chandra" notifications@github.com wrote:
|
@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: |
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 ( |
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 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 If we modify your example like below, you'll see the same issue again. Template:
Usage:
Notice the addition of This is surely a polymer issue to fix. Appreciate your patience. |
Ember works with polymer 0.5 but not with polymer 1.0.
Elements will only render if placed inside index.html, but inside any route like in application.hbs it does not render very well. The big problem is with tags, here is an image to explain whats happening:
Inside index.html, the element is rendered and the content is going to the right place, inside this topBar div there is a and this is where the content should go:
But in application.hbs, the content doens't go to the right place:
This is somehow related to how ember is rendering templates because if i use the console and just insert the element with jQuery it works:
I saw this article about ember and web components, it uses the tag as an insertion point so this should work:
http://pixelhandler.com/posts/a-bet-on-web-components-and-embercomponent-synchronicity
Would be very good to have ember working with polymer 1.0 the same way it works with 0.5.
The text was updated successfully, but these errors were encountered: