Setting class on ile-root

[dhruvkb]

• I have read the troubleshooting section before opening an issue.
• I have tried upgrading iles and vite.

Description 📖

This is a follow-up to the resolution of #150.

I have a problem with the approach taken in resolving #150. Using that approach it is not possible to set different classes on the <ile-root> wrapper and the component it encloses. Seems like setting just class makes both take the same value.

Reproduction 🐞

Taking the same example as #150. The code

<div class="parent">
  <MyComponent client:load class="child">
</div>

now produces

<div class="parent">
  <ile-root class="child" id="ile-1">
    <div class="child">Hello World!</div>
  </ile-root>
</div>

Consider if .child has CSS rule like font-size: 2em, the above code would make the font 4 times larger, not two. This is a pretty unexpected result.

Dependencies Info

Run npx iles info and pnpm list (or npm list) and provide the output:

iles v0.9.0 vite v4.0.3

[guradia]

Best solution would be: No <ile-root>.

A Hack, when ever applicable:
Make use of "multi/zero root"-Templates.

Let's say you had use for an <h2> above your <div> in the Component. Then iles won't propagate the attributes to any of those tags and just keep them on <ile-root>

Same if you would ditch the <div> and just wrote <template>Hello World!</template>. Your styles for other opportunities may then obviously take into account that they need to apply to another tag.