Working with Custom Elements and Events

[alexlafroscia]

I'm having a bit of trouble working with custom elements in an Ember app, and I think it comes from some assumptions that Glimmer makes about angle-bracket components.

If I have some custom element (say os-modal for example) that I want to bind a custom event listener do, I want to do something like this:

<os-modal {{action 'onModalClose' on='modalclose'}}>
  Some modal content
</os-modal>

However, I get an error from Glimmer:

Element modifiers are not allowed in components

The problem is that Glimmer has no way (that I know of) to tell the compiler that os-modal is not a Glimmer component, and to treat it like any other HTML element.

Is there actually a way to tell Glimmer (or Ember) about non-Glimmer custom elements? If not, what would the steps be to work on that, and RFC for Glimmer? For Ember?

Original issue: ember-cli/ember-cli#6925

[locks]

This is unrelated to custom elements, as the lack of element modifiers will make it not work on native HTML elements as well. If you check the default project on Try, you will see that it has <button onclick={{action increment}}>Click</button> and not <button {{action increment}}>Click</button>

[alexlafroscia]

How do you bind a custom event then? I tried something like

<os-modal onmodalclose={{action “whatever”}}>
  Content
</os-modal>

But the event didn’t fire

[alexlafroscia]

Here's an example of an Glimmer project that tries to establish a custom event listener the way that is recommended above.

It doesn't seem like you can onanycustomeventname the way you can onclick, which doesn't provide you with a way to declaratively set up event listeners for custom events.

[jasonmit]

<os-modal {{action 'onModalClose' on='modalclose'}}>
  Some modal content
</os-modal>

The newer versions of glimmer seem to no longer has this issue. Within Ember, it was fixed in 3.1.0 most likely because of emberjs/ember.js#15828

[wycats]

The latest version of the Glimmer VM uses capital letters rather than dasherized names as the signal that it's looking at a component.

This should fix this issue, I think.