Working with Custom Elements and Events

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: https://github.com/ember-cli/ember-cli/issues/6925

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

[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 https://github.com/emberjs/ember.js/pull/15828