I think HTMLSmartComponents are the final masterpiece that completes Hotwire. This new type of frontend components allows us to develop smart frontend components without using any frontend framework nor library.
Interesting. The only comment I can add at this point is, without trying it at all, is that you’ve apparently boxed yourself into only being able to use each component once per page.
An HTML ID may only ever appear once per page.
Unless some mechanism I haven’t seen yet updates those to be globally unique, your resulting DOM will be invalid. And JS really hates an invalid DOM, because it leads to inconsistent or unpredictable updates later.
Good point, if you use only html files you can’t put each component in its own file, and for reuse you have to manually copy and paste each component and change the ID manually.
To solve both points you need a server-side language. For this you can use Symfony or Laravel, or any. This way you can automate the IDs and place each component in its own file. The key is that using Laravel or Symfony you can program frontend components using blade or twig and without using frontend frameworks. The results are incredible. This components are easier to develop and understand, gives you the raw power of html, css, and js, and are compatibles with all web technologies.