O with occluded right edge to appear also as a C Open Web Components Guides Docs Blog Toggle darkmode

About Open Web Components

Why Open Web Components

We want to provide the community with well-known and experience-tested recommendations for their web component projects. Everything we do here is to encourage and support development with these open standards.

Our Philosophy

The goal of Open Web Components is to empower developers with powerful and battle-tested tools for creating and sharing open-source web components.

Many web developers have experienced the dreaded "Javascript Fatigue". With our recommendations, we hope you'll enjoy the peace of mind that comes from having a well-known default solution for almost everything. From IDE to CI, Open Web Components has got you covered.

We want web component development to be accessible and approachable for everyone, regardless of their background. Therefore, our recommendations aim to be easy to use, be ready to use, and provide that "it just works" developer experience we all crave for the various aspects of web component development.

Best practices/recommendations and examples may change and evolve over time.

Why Web Components

We believe that web components provide a standards-based solution to problems like reusability, interoperability, and encapsulation.

Historical Background

The World Wide Web was originally just text documents connected by hyperlinks. As technologies like JavaScript and techniques like AJAX and REST entered the picture, the web slowly developed into a platform for full-fledged application development.

At first, JavaScript libraries like jQuery were absolutely required. jQuery gave developers a common set of tools across browsers with extremely different feature sets. Eventually, jQuery features became standard browser features. The pattern of libraries innovating and browsers subsequently standardizing continued. As the "browser wars" died down, the pace of standardization increased, and many new features came to the web.

In the last several years, a component-based model for web application development was popularized, and the JavaScript community blossomed with a wide variety of libraries and approaches. Work on standardizing the web’s native component model began at Google in 2012, and after several years of open development, was successfully implemented across all major browsers in 2019.

Technical Benefits

What if you could remove code, gain performance, and streamline implementation across everything you build? Web components provide this through the power of subtraction.

  • Replace JavaScript you'd normally need to include by letting the browser handle things like templating, style scoping, and component model.
  • Increase your app's performance.
  • Write using a streamlined component API that combines the best bits of popular libraries and frameworks!
Performance

Just like querySelector reduces developers' dependence on jQuery, the web components standards reduces the size and complexity of component libraries and frameworks. This ultimately benefits users by decreasing page load times and increasing app performance.

Future Proofing

Using the browser's standards-based component model will increase the longevity of your application. The web has an extremely strong tradition of backwards-compatibility. Standards bodies have consistently gone out of their way to maintain legacy APIs.

Flexibility

The web components standards are fairly low-level, letting library authors build upon them with innovative APIs. By using such libraries you can build your app in the style you want while still leveraging built-in browser features.

Modern Web Family

Open Web Components is part of the Modern Web family, which consists of:

  • modern-web.dev with the @web npm namespace
  • open-wc.org with the @open-wc npm namespace

Contribute

Feel free to critique, ask questions, and join the conversation, we'd love to hear your opinions and feedback. You can reach us by creating an issue on our github or on the #open-wc channel in the Polymer slack.