Proposal: web-components distribution

[AndreyYolkin]

Note

TLDR: Add new package shipping our components as Web Components

Goal
To make our UI components work in any project - whether it's React, Angular, or plain HTML-by distributing them as standard Web Components

Why do this?

• Works Everywhere: Our components won't be locked into a single framework.
• No Style Conflicts: Styles are isolated, so they won't break the rest of the website.
• Easy Integration: Other teams can use our components just like regular HTML tags.

How it works
We will use Vue 3, which has built-in support for this. By using the defineCustomElement feature, we can easily turn our Vue components into standard Web Components that any browser can understand. We might ship them under different package name (TBD)

Key Benefits

1. Shared Library: One set of components for all teams, regardless of their tech stack.
2. Fast & Light: Components run natively in the browser.

[userquin]

What about SSR (Nuxt, for example)? It can be a real pain. Be careful if Vue Web Components requires Vue at runtime (I'm not sure); perhaps we can wait for Vapor to become stable (alien signals).

NOTE: I used Polymer 12 years ago, web components are just awful 🤮, and styling complex components can be a real pain. I don't use web components anymore.

[AndreyYolkin]

Yes, I opened the issue mainly to explore the possibility. Web components evolved since 2010-x a lot and there're people which use them. If maintenance cost is huge then we say no, obviously

[userquin]

Now I use lit-html from time to time on my repos (vitest, unocss and some pwa starter for microsoft)

[johnleider]

I considered web components but ended up avoiding because of popularity.

[e1berd]

when I previously worked with defineCustomElement in Vue (about 2-3 years ago), I ran into the following problem: intuitively, I expected that defineExpose would conveniently provide public methods to the component's user (just like it works in regular Vue components through template refs)

but in practice defineExpose didn't expose methods and properties onto the HTMLElement itself - you couldn't call el.myMethod() from the outside

for example, in Stencil this is solved very elegantly with the @Method decorator

has anything changed in this regard in the current versions of Vue 3 (3.4+ / 3.5+)?

is there now a convenient and recommended way to provide a clean public interface of methods for a web component created with defineCustomElement, without hacks in onMounted and without accessing the internal _instance.exposed?