Proposal: Allow settings attributes on `<ile-root>`

[dhruvkb]

Is your feature request related to a problem? Please describe. I tried to make a client-side hydrated div that grows to the size of its parent.

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

The following CSS is applied to it.

.parent { display: flex; }
.child { flex-grow: 1; }

But the markup that is generated has the <ile-root> component in the middle of the tree which prevents the styles from working.

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

Describe the solution you'd like It should be possible to apply some styles to the ile-root element. A hacky approach would be to support attributes like iles-class or iles-style that applies to the <ile-root> element instead of being passed down.

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

The above template should produce the below markup.

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

Describe alternatives you've considered Avoiding the use of styles based parent-child relationship works for now.

[ElMassimo]

Marking it as an enhancement because .parent > * is a simple workaround for styling.

---

Would like to get some proposals for how to differentiate attributes for the wrapper and the inner component.

I'm leaning towards reserving the ile- prefix, as in ile-class and ile-style, which would be applied in the ile-root element:

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

would result in:

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

[joezimjs]

Maybe allow people to use <ile-root> directly as a component in their templates and let them specify attributes directly on it, and then when compiling, if you see the ile-root component in there, just skip adding it.

Maybe?

[davidlueder]

It seems that adding class="abcd" works during development (iles dev --open) but not after generation of the static page (iles build && iles preview --open). I would really like to use this :)

[ElMassimo]

After considering the usages in existing sites, and assessing the trade-offs in implementation complexity, I decided to try the following approach.

The current behavior will be to apply the class attribute to the ile-root wrapper. The inner component will still receive that class, and can choose to ignore it or apply it, as with any other prop.