Closed dhruvkb closed 2 years ago
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>
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?
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 :)
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.
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.The following CSS is applied to it.
But the markup that is generated has the
<ile-root>
component in the middle of the tree which prevents the styles from working.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 likeiles-class
oriles-style
that applies to the<ile-root>
element instead of being passed down.The above template should produce the below markup.
Describe alternatives you've considered Avoiding the use of styles based parent-child relationship works for now.