diff --git a/packages/ember-glimmer/lib/component.js b/packages/ember-glimmer/lib/component.js index 80894ee6f18..1ef2ea589ca 100644 --- a/packages/ember-glimmer/lib/component.js +++ b/packages/ember-glimmer/lib/component.js @@ -167,6 +167,8 @@ const Component = CoreView.extend( } } )()); + + assert(`You cannot use a computed property for component \`tagName\` on ${this}.`, !(this.tagName && this.tagName.isDescriptor)); }, rerender() { diff --git a/packages/ember-glimmer/tests/integration/components/curly-components-test.js b/packages/ember-glimmer/tests/integration/components/curly-components-test.js index 687d94fcf21..08ab6012394 100644 --- a/packages/ember-glimmer/tests/integration/components/curly-components-test.js +++ b/packages/ember-glimmer/tests/integration/components/curly-components-test.js @@ -266,6 +266,20 @@ moduleFor('Components test: curly components', class extends RenderingTest { this.assertComponentElement(this.firstChild, { tagName: 'foo-bar', content: 'hello' }); } + ['@test tagName can not be a computed property'](assert) { + let FooBarComponent = Component.extend({ + tagName: computed(function() { + return 'foo-bar'; + }) + }); + + this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' }); + + expectAssertion(() => { + this.render('{{foo-bar}}'); + }, /You cannot use a computed property for component `tagName` on <\(.+>\./); + } + ['@test class is applied before didInsertElement'](assert) { let componentClass; let FooBarComponent = Component.extend({