Could we get docs on package/element in particular around ssr?

[matthewharwood]

I'm looking to write preact or vanilla web components and ssr prerender them into pages. When looking at your SSR example I see that you're using skates custom Element class to extend from. Could we get some docs on this class? Could we get an example of ssr using preact?

[FDiskas]

There is an example of ssr but in hybrids reppo issues :)
hybridsjs/hybrids#24 (comment)

[treshugart]

Hey @matthewharwood. I've just committed some much-needed updates to the docs. Unfortunately, there isn't a good story for SSR when using web components inside a host framework like Preact or React. The SSR package works on something that is completely built in web components as it contains its own render() function that is like renderToString().

I am actively thinking about this, though, and think using a custom JSX pragma function could get us most of the way there. When SSR'ing with a framework in mind, you have to design the solution in just that way: tailored to the specific framework in mind. It also places restrictions on what your custom elements can implement inside render() as it will need to know how to turn it into a string. One idea I have here, is the ability to define a renderToString() method on the class itself. That way, each base class could implement this and the JSX pragma just needs to call them when transforming inside of a renderToString() call.

One major downside of SSR'ing like most frameworks do is that you sort of have to emulate shadow DOM CSS scoping somehow. Whether this is via CSS-in-JS or other means, it's necessary to fill the gap between TTFB (time to first byte) and when the custom element definitions upgrade the elements.

This may sound a bit nebulous at this point and that's because it's all in my head and I'm brain-dumping all the ideas I've been thinking about lately. Definitely happy to continue this conversation and flesh it out more if you're interested.

Again, apologies for not having a solution for other libraries yet, but I think we can get there eventually :)

Docs for skatejs/element updated at https://skatejs.netlify.com/docs/element.