New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot apply style props to client components #233
Comments
@eight04 You nailed one of the drawbacks with partial hydration and this is related to #237. Basically each component is an island so we can't fully support all of Svelte's functionality out of the box... but you can get what you are trying to achieve by wrapping sub components in a hydrated component. Open to a PR for this if you'd like to add and document this. The concern here is expanding scope of trying to match Svelte's offerings and adding more complexity to the preprocessing stage when our business case doesn't need this functionality. (we just hydrate a sub component) Basically it is a decision against complexity and maintenance burden. Would be a nice to have though. |
I think it is possible to make Elderjs support style props. Since elderjs adds a component wrapper <!-- rendered HTML -->
<div class="test-component" id="testXXX">
... prerendered component ...
</div> It can apply style props to this wrapper: <!-- rendered HTML -->
<div class="text-component" id="testXXX" style:--color="red">
... prerendered component ...
</div> This won't work when <!-- source -->
<Test --color="red" hydrate-client={{text: "test2"}} hydrate-options={{"loading": "none"}}/> <!-- after preprocess -->
<Test --color="red" {...{text: "test2"}} /> |
Here is the repro:
https://github.com/eight04/node-test/tree/elderjs-style-prop
Svelte allows you to pass css custom property to components via
--prop=value
syntax:https://svelte.dev/docs#template-syntax-component-directives---style-props
However it doesn't work with client components:
Result in:
I guess it's just syntax sugar that will be compiled into styled dummy div at compile time. Elderjs replaces the entire client component with something else when compiling hence the directive doesn't work. Passing it as a real component prop does not work either since it's not a real prop but template syntax.
The text was updated successfully, but these errors were encountered: