Dynamic tag name inside of component (NOT component's outer tag)

1

I’m making a reusable, editable text component using the contenteditable attribute. Ideally the element with contenteditable can be dynamic, so that it could be h1, h2, span, div, etc…

But that element is not my component’s outer element, rather it’s one of the elements inside of it. Here is the current component’s template.hbs markup:

<div>
  <label>
    {{labelText}}
    <h1 contenteditable="true">{{value}}</h1>
  </label>
</div>

I know you can use the tagName to set the component element’s tag name, but can you do something similar for HTML elements inside the component?

I tried doing <{{elementName}} contenteditable="true">{{value}}</{{elementName}}> and then having a elementName property on the component, but that didn’t work.

Is this possible in Ember? I can break down the contenteditable element to be its own component (and thus pass it a tagName) but it really isn’t meant to be used by itself, so that’s not ideal.

2

As far as I know, without manually creating an element, the only way is to have a sub component. It might seem a little silly to have another component just for this task, however if it has its own concern then it’s possible you’ll use this else where later on. I’ve had this happen to me on numerous occasions

Another thing to note is Glimmer’s file layout, where components can be declared as only useable inside another component. While Glimmer isn’t Ember yet it gives you an idea of where the technology is heading