Compile Error: Element modifiers are not allowed in components.

[jmillegard]

Maybe this is not related to ember-polymer directly but rather to polymer itself and ember.

When I try to do a basic thing like this and assign an action: <paper-button raised {{action 'signIn'}}>Sign in</paper-button>

I get this error:

Error: Compile Error: Element modifiers are not allowed in components at ComponentBlock.push (/Users/johannesmillegard/workspace/paper-app/node_modules/ember-source/dist/ember-template-compiler.js:481:27)

I have tried with different versions of ember (2.13, 2.12 e.t.c) but it is only working when I go far back as ember 2.9. The error message seams to come from glimmer core.

What can be wrong?

[dunnkers]

Thanks for tracing this down! I was able to reproduce, and traced this down to the following line in glimmerjs/glimmer-vm: javascript-compiler.ts#L91 and its accompanying test ember-component-test.ts#L2474.

Looking at the source code, it seems since paper-button is not a standard html element, glimmer recognized it as an angle-bracket glimmer component. Since Glimmer now 'upgraded' our element to an ember component, it is indeed not allowed to put in an element modifier. Angle bracket components seem to be baked in Glimmer already, but are not advocated anywhere.

I will open an issue for this in glimmer-vm. The glimmer team is working on better custom element support, they recently also fixed another issue I found earlier: https://github.com/glimmerjs/glimmer-vm/issues/453.

So, untill the time being, the best thing we can do is wrap the element in an Ember Component. This is what the ember-polymer-paper addon is for! It includes most paper input elements now, although functionality is not perfect yet. I will add a paper-button component very soon!

[dunnkers]

@jmillegard I just add the paper-button component to ember-polymer-paper, check out the documentation page! 🌈

[dunnkers]

Issue submitted to glimmerjs/glimmer-vm. Tracked in https://github.com/glimmerjs/glimmer-vm/issues/554.

[jmillegard]

Thank you for submitting the issue to glimmer-vm @dunnkers. I think your ember-polymer-paper looks handy, but Im actually more interested to know how polymer works with ember in general since we(our company) are evaluating this combo for our existing ember applications. The plan is to write our own ui-components in polymer so we can use them both within our ember apps and in other environments. I got the feeling that its a bit risky and shaky right now since glimmer are going through a lot of changes. But do you think we can expect ember to work properly with polymer/webcomponents in future releases? Or will it be all about angle-bracket glimmer components? Or am I maybe just doing it wrong? (putting actions inside the custom element)

Thanks again for all help and sorry for maybe putting this issue in the wrong repo, but Im glad you brought it on to the right one :)

[dunnkers]

That sounds like a good way to completely separate UI from application logic, by using custom elements as a universal UI API. But I would agree, Custom Elements cooperation with Ember is still quite sloppy. When Glimmer landed in Ember, some new regressions surfaced, which we are clearly bumping into now.

However, the Glimmer team is working hard on resolving all those issues and with Polymer 2.0 just landed, Custom Elements are now built on the official v1 Custom Elements W3 Spec. That means the elements you create with Polymer today, are written in a standard format all browsers will eventually natively support. Do remember that we are still in an early phase - browser vendors are still implementing the full new spec. Chrome and Safari 10 already have full support though. See the caniuse.com custom elements page. Up until all Evergreen browsers have implemented the spec, we'll have to use the polyfills.

Until all Glimmer-Polymer cooperation issues are resolved, your best bet is, like I said before, to wrap all custom elements you'd like to use in an Ember component. However, doing this for every element you want to use, from the webcomponents.org element library for example, is obviously a tedious process. That's why I plan on creating a system for injecting shims of Custom Elements as Ember Components into your app automatically, using polymer-analyzer. This would then allow you to install a custom element through bower, and then just use it like if it were an Ember component, with all element values correctly bound. I had been developing this in the auto-component-injection branch.

And thanks for the thoughts, it's great to discuss using these new technologies. By the way, I'd greatly appreciate a GitHub star on both repo's ⭐️ cheers ✌🏻

[dunnkers]

@jmillegard see glimmer-vm#554:

You need to explicitly bind the onclick event like so: onclick={{action "some-action"}}.