I see Angular components as element directives. Take a component named hero, for example, I can include it in the parent template like so:
<hero myparam="something"></hero>
What I envision is using the hero element as a container managed by the component itself.
HOPED FOR
This is what I expect to achieve with the binding mentioned above:
<hero id="component123" class="alien" custom="foo">text</hero>
My customized component will modify the provided element and utilize it according to its needs.
REALITY CHECK
However, it appears that the component is limited to rendering its template only within the hero element. The best outcome I can obtain is:
<hero myparam="something">
<div id="component123" class="alien" custom="foo">
text
</div>
</hero>
I find this arrangement problematic because the hero element isn't genuinely the "hero", but just a surrounding wrapper for the actual content. This compromises semantic clarity and introduces unnecessary additional elements.
In Angular development, is it considered a best practice to use components purely as wrappers and place the real components inside?
For those interested, here's an official sample to experiment with: https://plnkr.co/edit/NKjCDS8OEngYHNrBmC5O?p=preview