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

The all new Open Web Components

It has been an incredibly busy year for Open Web Components. A lot has happened behind the scenes and there is still more to come.

Let's talk about the obvious first.

The all-new Open Web Components website

As you may have noticed we completely restructured all our content. There is now a clear distinction between Guides and Documentation.

In Guides we focus more on step by step explanations while Documentation is meant as a reference book where you can look up all available options and configuration.

In Guides you can find some of our most popular pages like Codelabs, Code Examples or Publishing. However we also added a complete new Community section which showcases web component communities you can join and different Base Libraries and Component Libraries you should check out.

We also made the FAQ pages more prominent in a new knowledge section. There we share things like how attributes and properties or events work.

Technically the new website is built using eleventy, rollup, and our own tools like Web Dev Server, Rollup HTML plugin, and MDJS. We use a service worker that caches the static HTML pages.

Cleaned up our repo

Over the last years, we have created different projects and recommendations. During this time certain projects have become deprecated as we moved on to different tools or approaches.

This doesn't mean that we've completely dropped support for these projects. While we don't feature them on the main website, we still maintain and support these projects. We don't develop any new features or functionalities, but we will continue to support bugfixes and in some cases update along with the dependent tooling.

The documentation for our legacy projects is maintained in the GitHub readmes:

Legacy projects

We also moved out our create Generators into a dedicated repository - which is only our first step as we will later automate updating it's dependencies via a bot so you can always be sure you get the latest versions.

As we announced before, we have moved some generic tools and recommendations to our new Modern Web project.

Change our setup

On top of moving out all "dusty" code, we changed the setup of our repository.

We are now using changesets to gives us more control about what gets released and how. With github actions we run our tests on multiple node versions (12 & 14) and windows at the same time so we can make sure our tools don't break.

Additionally, our web testing is now performed by Web Test Runner which runs web tests in all evergreen browsers within a GitHub action.

Return focus to Web Components

With all those general web development packages moved to Modern Web and all those legacy packages move out of the repo we can bring our focus back to web components.

You will see more web component specific guides and tools coming up.

One of those is our just recently released eslint-plugin-lit-a11y. It features more than 20 rules that will help you write more accessible lit-html templates.

Issues and discussions

We do have a fair share of open issues which makes it sometimes hard to see/understand what are actual bugs/issues and what are feature requests or questions. Additionally, with all these packages some issues probably are not relevant anymore. We plan to clean this up in the upcoming weeks by

  1. Moving issues to the appropriate repository (if it's code got moved)
  2. Moving feature requests into github discussions
  3. This will leave only actual bugs in our issue list 💪

We do hope this will make navigating out Github Page easier.

Joining Modern Web

This now also makes it more apparent that we are part of the Modern Web Family.

So be sure to follow Modern Web on Twitter and if you like what you see please consider sponsoring the project on Open Collective.

Written with ♥️   by the Open Web Components Core Team

Caught a mistake or want to improve the blog? Edit this blog post on GitHub!