You Should Be Shipping a Manifest with Your Web Components

Besides your components, the Custom Elements Manifest is the most important thing you can ship in your library.

What is a Custom Elements Manifest (CEM)?

The Custom Elements Manifest is a .

.

This is nice if you want to create specific types or framework integrations you would like to ship with your components, but it's tough to anticipate all of your user's needs. You may be building your components to be used in a Vue.js environment, but another team may come along that needs to use your components in a react environment. Rather than waiting for you to build and ship react wrappers, teams can use the in a Next.js application. Shoelace provides react wrappers, but they were throwing an error when Next.js tried to server-side render them. Fortunately, Shoelace ships their CEM, so I was able to use it to generate new wrappers that were SSR-safe.

Here is a link to an example:

and Lit labs has an .

This is a great option for a few reasons reasons:

• It supports for developers to extend the functionality of the analyzer


• Not only is it easy to use, but it also has great documentation and

NOTE: These provide CEM Analyzer plugins and functions for pre-generated CEMs. If you're not using the CEM Analyzer, don't worry, you can still take advantage of these.

Conclusion

The Custom Element Manifest is a great tool for accelerating user adoption of your custom element component library. By providing it as part of your product, you can provide consumers with the means to ensure their needs are being met when using your custom elements.

When choosing a library or framework for authoring your custom elements, it's a good idea to try to find one that you can generate a CEM, especially if your components will be used by other teams.