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.