How to use SSR with the polyfill web component & wesc? (avoid hydration?)

[thejackshelton]

I'm not sure if this is a problem this library or wesc can solve, but web components seem to hydrate, as well as I'm not sure if my demo is being properly SSR'd or not.

https://github.com/thejackshelton/selectlist-polyfill-playground

I have a little demo here that I've been playing with, and I've come across the wesc project and am not sure how to SSR the web component for Qwik.

Qwik is a fullstack javascript framework similar in syntax to React, but it does not have hydration. Things are loaded on the server, and then "resumed" to the client via a service worker on a separate thread. This is called resumability, and is instantly interactive. Web components seem to have the assumption that hydration is need, and so even inside of a resumable framework, it seems that hydration happens.

This is from Misko, a member of Qwik core and the creator of Angular JS

So <x-option/> is rendered on the server, but there is nothing in it. It's empty.
On the client the Web Component wakes up looking for and renders its content. which explains the temporary layout break.

So to me this is not SSR'ed and it does hydration on the client. Does it work, sure, but it is not scalable. Imagine you built all of the app from WCs, then it will become just a client side app without SSR.

The current tradeoff we are looking at is resumability working for the actual selectlist element, but hydration for polyfill browsers (which is all of them currently haha).

Would love to hear some thoughts or insights you guys might have here. We are working on an open source headless UI library for Qwik, and it would be a game changer if we could utilize the benefits of the framework along with the polyfill here.

Further convo:
https://discord.com/channels/842438759945601056/942509201425575986/1156625322905702452