Interest in Web Components (customElement) for web-forms library?

I have been following the development of web-forms keenly - love the idea and implementation!

So it looked like there was a Solid UI library in development, but this has been superseded by a Vue component library, for (I assume) better integration with existing central-frontend code.

A library like this actually seems like a perfect candidate for Web Components, being entirely framework agnostic and embeddable anywhere on the web.

I was wondering if this possibly was considered?

If not, does anyone think this could be a good idea?

I am planning to design a few components myself in Svelte over the coming months, but could equally make them as Web Components via Lit and contribute them.

1 Like

Yes, we will likely eventually publish one or more custom element or other framework-agnostic way of integrating Web Forms. Here is an issue around that: https://github.com/getodk/web-forms/issues/76 You'll see a PR that does expose a custom element but is a bit hacky and aspirations to come back to it with better infrastructure in place.

The primary driver of that decision is to have a single frontend library used across ODK projects so it's easier to go between them without making mistakes in development. But yes, it also helps with integration!

1 Like

Did you mean building the Web Forms frontend by composing custom elements instead of using a specific framework's components?

That's also something we briefly considered and in particular looked at leveraging https://github.com/material-components/material-web. We ultimately decided to try to have a somewhat more uniform frontend development experience across Central and Web Forms and to leverage a more mature component library (PrimeVue).

We may eventually provide hooks to define custom question types or appearances but that's not a significant priority.

Related to Web Forms in some way or not directly?

Oh cool! This is fantastic news I wasn't aware of :smile:

I will be following developments closely and could lend a hand if it helps anywhere :+1:

Yep exactly that! Either building using something like Lit and Tailwind/Uno, or an off the shelf lib like you mentioned. I have been using Shoelace recently and really like it.

And yes, related to web forms! There might be a big push for us to start using web forms soon, particularly for a more seamless user experience by integrating it into our existing UI, but also for iOS support too.

I haven't dug into it yet, but imagine I need to build around the web forms core library, with either Svelte or Lit. May even need a geo element, so will give that some thought too.

I will update with progress here if useful :+1:

1 Like