Documentation Enhancement: Note on Styling Issues with experimental-islands

[tristandruyen]

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]

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! 😄