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

@skitterm wrote:

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.

Posts: 1

Participants: 1

Read full topic