Web components
Web components and custom elements
Web components are a set of web platform APIs that allow you to create your own custom HTML tags. They are a way to extend HTML with new functionality, and they are built on top of the browser’s native capabilities.
Certara UI components are constructed using this web component API/lifecycle to create our own collection of custom elements. Our collection of components are built using the StencilJS framework.
Why web components?
Web components are used to create reusable, modular, and encapsulated HTML elements, offering numerous benefits like framework-agnostic development, improved reusability, and enhanced performance. They allow for consistent UI experiences across different projects and frameworks, while also enabling a simpler and more predictable developer experience.
Framework-agnostic reusability
Web components can be used in any HTML page or application, regardless of the underlying framework or library. This allows for consistent UI elements across different projects and teams, making it easier to share and reuse code.
Improved performance
Web components can be more performant than some frameworks due to their simpler structure and reduced overhead. They can lead to smaller bundle sizes and faster page load times.
Simplified development
Web components provide a straightforward way to create custom HTML elements, reducing the need for complex abstractions or templating engines. This can lead to a simpler and more enjoyable development experience.
Long-Term Mmaintainability
By using web components, you can create UI widgets that are less reliant on specific frameworks and more likely to continue working across different browsers and versions.
Flexibility
Web components can be used in conjunction with other frameworks or libraries, or they can be used independently, allowing for flexible development strategies.
Incremental adoption
Web components can be gradually integrated into existing applications without requiring a complete rewrite. This allows for a smooth transition and minimal disruption to current workflows.
Cross-browser compatibility
Web components are browser standards, meaning they’re supported by all major browsers. This ensures that your components will work consistently across different platforms.
Encapsulation and isolation
Web components can encapsulate their internal styles and behaviors, preventing conflicts with global CSS or JavaScript. This isolation promotes modularity and makes components easier to manage and maintain.