leptos-rs / book

The home for the Leptos book, which can be found deployed at https://book.leptos.dev
MIT License
59 stars 58 forks source link

Documentation Enhancement: Note on Styling Issues with experimental-islands #65

Open tristandruyen opened 4 months ago

tristandruyen commented 4 months ago

This is more a Documentation request than a feature request, but there was no issue template for that.

I can do a PR my question just would be where to add this documentation ? Maybe inside the islands section in the book ?

Is your feature request related to a problem? Please describe. Yes, after migrating my application to use experimental-islands, I encountered styling issues. Specifically, some CSS styles broke and did not apply as expected.

Describe the solution you'd like I would like the documentation to include a section on how to address styling issues that arise when using experimental-islands. Specifically, a guide on adding the following CSS rule to the project's main stylesheet could be very helpful:

leptos-island {
  display: contents;
}

This rule makes the leptos-island component act "transparent" in the DOM, ensuring that the children of the island are styled correctly as if the island component wasn't there. Including this in the documentation would aid developers in ensuring their applications maintain their intended styles. As I am no CSS-wiz I am not entirely sure there aren't any unintended consequences, but to me this seems like a solid solution.

Describe alternatives you've considered An alternative could be to implement a built-in solution within the experimental-islands framework that automatically applies this styling fix, using inline styles, and/or provides a configuration option to enable such behavior. However, documenting the current workaround is a quick and effective solution that can immediately assist developers. Also a "built-in" solution would probably also cause unexpected behavior for existing users of islands and would therefore at least require a version bump.

Additional context None

gbj commented 4 months ago

Thanks, yes. This is the best and intended way to use CSS for this purpose. I would suggest that the islands section of the book is the best place for it — I'm going to transfer this issue to the book repo, which is where the source for the book lives. It would be great if you'd make a PR! :smile: