What framework should I use to create an accessible component library?

So I need to create a component library, and the requirements are:

1. Components must be accessible. Be careful with this. More info here, here, and here.

2. Components must work with different technologies, like, SSR and SPAs like Angular.

3. The library has to be lightweight.

Candidates: Stencil, Lit, FAST, Solid, anything else?

I think Lit does not allow removing shadow dom (because of accessibility) and use slots. Does Stencil?

I need opinions!!

Comments

[James Thompson]

Hello @ismaestro, 👋

I like Fast Design - fast.design/ - as an option. It's a fully spec'd out WAGC 2.1 compliant web component library that supports multiple frameworks. One thing...I'm not sure if it meets your #3 requirement to be lightweight. Can you help elaborate what this means for you?

[Gustavo Alexandrino]

I would choose Lit. It has been my favorite library! 💙

Regarding shadow dom, Lit actually allows you to render components directly into the main DOM tree, and also the use of slots is not required.

To render components without shadow dom, just implement this code at the end of the component's class:
createRenderRoot() {
return this;
}

Check the documentation: lit.dev/docs/components/shadow-dom...

[Ismael Ramos 🚀]

Hi Gustavo!

Thanks for the reply. I know you can deactivate shadowDom with Lit. But the problem is that you'll lose the ability to use slots, and therefore composition. Check out this. This comment is very clear.

So a good alternative to lit to not use shadowDom but be able to use slots, would be stencil (like the last comment recommends)?

[Gustavo Alexandrino]

Hi Ismael!

Thank you for sharing the link detailing the issue. In that case, Stencil seems to be the choice for you.

Regarding Solid and FAST, personally, I wouldn't pick either. Solid's reactivity resembles React's and, although I like React, I'm moving away from that approach. I didn't know about FAST, so I went to check it out. It does not look as mature as the other options, with an incipient documentation (if I visited the right website).

Anyway, I would be interested if you post about the conclusion of your choice and its implementation.

Good luck!

[leob]

Why not use an existing component lib with good accessibility baked in - why be the 2000th dev reinventing the wheel?

[Ismael Ramos 🚀]

Basically, it is because of two reasons:

1. Customization: we want to create components with specific designs and general component libraries are strict on this.

2. Concrete functionalities: we have components that have functionalities that they stand out from the ordinary.

But I'm open to seeing alternatives. What libs are you thinking of?

[leob]

Quasar is a good one, and there are others - but if you just need an in-house component lib with specific bespoke functionalities, yes then there's nothing wrong with a DIY approach :)

[artydev]

Look at this : webcomponents.dev/

Regards