Self closing void tags with Ember Glimmer components

Question

I am in the process of upgrading an Ember app to the latest version (3.17) and have run into an issue with the new Glimmer components. Not having to specify a tag name is great, but I'm not sure how to handle self closing void elements such as an

<img> 

tag. It's obvious that you can wrap your component in a closing tag element

<div><MyComponent @name="test"/></div> 

but I've not come across any examples which use a self closing tag.

Many thanks in advance.

Answer 1

Here is an example using an <img> tag in a component. Not sure if it is what you're looking for, but you can just use the void element inside the component. You do have to self close the component tag when you call it.

Answer 2

you don't. A component renders html, and you can not put html into a self closing tag. A self closing tag has, by definition, no innerHTML. What would even expect from a component inside an <img> tag?