Solid Element how to render children
I'm using solid element and I need to throw children into solid based web components but none of the options worked can you tell me how to implement this correctly?
19 Replies
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
It works, but not in my case when I use Portal and Show. But thanks for the tip now I know exactly how to render children elements
I think
<Show/> should normally work, but it is possible that <Portal/> might cause some issues.
if u want u can make a minimal reproduction in the playground and I can have a look at itSolid Playground
Quickly discover what the solid compiler will generate from your JSX template
A rough sketch like this
In the example, everything works except moving the slot (content) to Portal
Tried it without noShadowDOM and it doesn't work either
ye i m not sure if your setup is going to work tbh
removed some clutter from your example (just fyi, you have to recreate a new playground-link if you make a change, each link is a snapshot)
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
<slot/> is a webcomponent thing, solid does not process this, so if you move the slot out of the webcomponent with the <Portal/> the webcomponent can't slot the childrenI've come up with a solution to make a modal. I can use the native <dialog> component in combination with <Show/>
good solution
using the platform 🙂
btw, don't know if u came across it already: lume/element is another way of creating web components in solidjs
it's more actively maintained. ryan does not believe anymore in web components, but trusktr does 🙂
I've tried litjs, FAST, Symbiote, Stencil.
I haven't tested your suggestion yet.
Web components are useful, but not so much that they should be standardized. I am working on blazor SSR and web components will be a salvation for me because there is no such close connection between js and ssr as in other frameworks.
waw quite a list, nice!
Web components are useful, but not so much that they should be standardized.yes, well said. what's your conclusion after trying them?
LitJs - Simple and gives everything out of the box
FAST - No documentation and have to try everything by feel
Symbiote - A lot of magic with state syntax
Stencil - hassle with compiler configuration, but syntax and functionality is quite nice
I am looking for a minimalistic solution for my case where I want to transfer to the client the storage of unnecessary states and the realization of functionality based on these states.
And now I'm choosing between solid-element and litjs
https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/Components/Button/FluentButton.razor
e.g. Blazor.FluentUI use FAST based web components to reduce server load
GitHub
fluentui-blazor/src/Core/Components/Button/FluentButton.razor at de...
Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications - microsoft/fluentui-blazor
nice, thanks for the overview
lit looks a lot like lume/element from first eye
with these
@decorators to mark propertiesYes
also the way how you declare scoped css and that render/template-function