Auto convert web components to css components at build

[realsamanrad]

Hi.
When I use web components, all of ld-component html tag names are rendered and exposed to visitors even empty placeholder slots and comments. This also increase the page load size.
Is it possible to convert web components to css components automatically in build time (server level) ?

For example this:

<ld-button class="hydrated"> 
    #shadow-root (open)
    <button aria-live="polite" class="ld-button" part="button focusable">
        <slot></slot>
    </button>
    hello
    <!--v-if-->
</ld-button>

To this:

<button class="ld-button">
  hello
</button>

[borisdiakur]

Hi @samanrd,
I'll try to answer both of your questions:

all of ld-component html tag names are rendered and exposed to visitors even empty placeholder slots and comments. This also increase the page load size.

The tag names must be rendered, because they are part of the web component. The #shadow-root (open) part of your example is not a comment. It is what the browser dev tools show to indicate that the component has a shadow dom. So this part is not transferred over the wire. The <!--v-if--> comment in your example is a Vue comment. It doesn't look like it's created by our component lib. I think it is created by your own code. Usually you shouldn't need to care about comments like this, since your own build tool would take care of minifying JS code during build time.

Is it possible to convert web components to css components automatically in build time (server level) ?

I think what you want are server side rendered web components which hydrate on client side. This could be achieved with Stencil's hydrate-app output target. I have experimented with this already using Nuxt and Next, but didn't come too far, because of different hydration errors, mostly related to mismatch between client and server rendered HTML. I haven't had the time to report this to the Stencil team yet. If you want to give the SSR topic a boost, please feel free to create a feature request. 🚀