Web Components Libraries

Open Cells is a flexible SPA framework that is designed around the concept of web components. This design choice ensures that Open Cells can seamlessly integrate with web components regardless of how they are implemented or which library is used to create them.

While you can develop your own custom web components, Open Cells lets you work with a wide range of existing web component libraries. Here are a few recommended options that are suitable for any project but there many more:

• Material Web: Google's collection of web components designed for building cross-framework applications.
• Shoelace: A collection of custom elements that follow modern web standards and are designed to work everywhere.
• FAST: A Microsoft-developed adaptive interface system built on web components, suitable for modern UI frameworks.

Although we recommend using Lit due to its simplicity, performance and compatibility with Open Cells, our framework is fully capable of working with web components created with other libraries or frameworks. Open Cells embraces the diversity of the web components ecosystem, allowing you to choose the best tool for your needs.

Stencil is specifically designed for building standard web components that are compliant with the Custom Elements and Shadow DOM specifications.

SolidJS can also generate standard web components, allowing for their use in any modern web environment.

Angular has the capability to wrap components as web components through its @angular/elements package, which enables Angular components to be bootstrapped as custom elements.

Vue has a similar capability where components can be wrapped and exported as web components using libraries like vue-custom-element.

React does not natively support generating standard web components, but Lit has a React Wrapper, @lit-labs/react, that allows to integrate React components within a web component application.