Tagless component defined with ES Class causes error

I am trying to use ES class syntax (this is because I am actually using ember-typescript, but this issue is not related to that project). As I understand the RFC for this was merged some time last year and some work has been done in this space to support projects like ember-cli-typescript and ember-decorators. I have read the RFC and am using the class syntax correctly from what I understand but perhaps I am still doing something wrong. I am trying to have a tagless element through tagName = '' but the way ES classes are implemented seems to have a problem with this.

See the following example, which I’ve created in this ember twiddle:

import Ember from 'ember';

export default class MyComponent extends Ember.Component {
  constructor() {
    super();
    
    // Empty string causes runtime error
    // "Assertion Failed: You cannot use `elementId` on a tag-less component"
    // Comment this line to fix
    this.tagName = '';
    this.debug = "Lorem ipsum dolor sit amet";
  }
}

This compiles fine, but when I visit the page I get a strange Error:

Assertion Failed: You cannot use `elementId` on a tag-less component: <component name>

I am unsure if I’m doing things wrong, if i’ve uncovered a legitimate bug, or if this is just something that is not yet implemented. Any ideas?

[rwjblue]

Sorry for the run around here, @pzuraq’s last reply is spot on.

I’m going to go ahead and close this as a (very polite and apologetic) “wont fix”.

[pzuraq]

We do not support using classic components with native classes directly in Ember. In order to customize the element, you should use ember-decorators, specifically the @tagName class decorator.