{"id":8268,"date":"2026-01-15T16:30:23","date_gmt":"2026-01-15T21:30:23","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8268"},"modified":"2026-01-15T16:30:24","modified_gmt":"2026-01-15T21:30:24","slug":"the-missing-link-for-web-components","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-missing-link-for-web-components\/","title":{"rendered":"The Missing Link for Web Components"},"content":{"rendered":"\n

Last year I was mainly working in a component library. I noticed that we had a lot<\/em> of duplicated code.<\/p>\n\n\n\n

Every component defines its properties, events and slots, their types, whether they are required or not, plus a lot of JSDoc annotations<\/a>. This is repeated for Storybook<\/a>, to inform the controls of the Storybook UI, for example to switch from the primary to the secondary variant of a button. <\/p>\n\n\n\n

Then we need a template, where you wire these controls to the attributes of the component. A similar template is present in both unit and end-to-end tests. And another template for Figma Code Connect<\/a>, which maps a component in Figma to the actual web component code. Naturally this can get out of sync far too easily. And since the codebase had already gone through a lot of hands for years, we had a lot of outdated Storybook files, properties that no longer existed but in test file templates etc. (For the particular Storybook sync problem, there was even an add-on, but since the StencilJS<\/a> community is not huge, we wondered how well this would be maintained in the future).<\/p>\n\n\n\n

What if there was a solution to all of the problems above?<\/p>\n\n\n\n

Even better if it could be used across all web component frameworks, and thus maintained and improved by a much larger community. Enter the Custom Elements Manifest<\/a><\/strong>. This is the missing link to connect the tooling in a web components project, enable more automation and much improve the developer experience.<\/p>\n\n\n\n

I\u2019ll use the custom-elements-manifest-demo repository<\/a> to show how to set up the different parts and how to use them.<\/p>\n\n\n\n

Scaffold a New Lit project with a Button Component<\/h2>\n\n\n\n

First, we scaffold a new Lit<\/a> project:<\/p>\n\n\n\n

pnpm create vite<\/pre>\n\n\n\n
In the CLI dialog, pick \u201cSelect a framework: Lit\u201d. Our example project will start with a single component: touch src\/my-button\/my-button.ts<\/code><\/p>\n\n\n
import<\/span> { LitElement, css, html } from<\/span> \"lit\"<\/span>;\nimport<\/span> { customElement, property } from<\/span> \"lit\/decorators.js\"<\/span>;\n\n@customElement<\/span>(\"my-button\"<\/span>)\nexport<\/span> class<\/span> MyButton extends<\/span> LitElement {\n  \/**\n   * The button variant style.\n   *\/<\/span>\n  @property<\/span>()\n  variant: \"primary\"<\/span> | \"secondary\"<\/span> = \"primary\"<\/span>;\n\n  render() {\n    return<\/span> html`<button<\/span> part<\/span>=\"button\"<\/span> class<\/span>=<\/span><\/span>${this<\/span>.variant}<\/span>><\/span>\n      <slot<\/span>><\/span><\/slot<\/span>><\/span>\n    <\/button<\/span>><\/span>`<\/span>;\n  }\n\n  static<\/span> styles = css`\n    button<\/span> {\n    }\n  `<\/span>;\n}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
The button has a default slot and a variant property that can be either primary or secondary.<\/p>\n\n\n\n
Create the Manifest JSON<\/h2>\n\n\n\n
You can imagine the Custom Elements Manifest like a detailed table of contents<\/a> for the entire project. Every component has its entry, complete with all attributes, and other meta data like default values, available options and textual descriptions.<\/p>\n\n\n\n
Here’s the beginning of a custom-elements.json<\/code> file about our new button:<\/p>\n\n\n
{\n  \"schemaVersion\"<\/span>: \"1.0.0\"<\/span>,\n  \"modules\"<\/span>: [\n    {\n      \"path\"<\/span>: \"src\/my-button\/my-button.ts\"<\/span>,\n      \"declarations\"<\/span>: [\n        {\n          \"name\"<\/span>: \"MyButton\"<\/span>,\n          \"tagName\"<\/span>: \"my-button\"<\/span>,\n          \"customElement\"<\/span>: true<\/span>\n          \"attributes\"<\/span>: [\n            {\n              \"name\"<\/span>: \"variant\"<\/span>,\n              \"type\"<\/span>: { \"text\"<\/span>: \"\\\"primary\\\" | \\\"secondary\\\"\"<\/span> },\n              \"default\"<\/span>: \"\\\"primary\\\"\"<\/span>,\n              \"description\"<\/span>: \"The button variant style.\"<\/span><\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
Luckily we don\u2019t need to gather all of this information by hand<\/em>. Instead, there is a tool that walks all files in a project, parses out the useful bits and compiles it to a JSON file.<\/p>\n\n\n\n
pnpm add -D @custom-elements-manifest\/analyzer<\/pre>\n\n\n\n
The analyzer comes with built-in configuration for common web component frameworks, like Lit, StencilJS or Fast, but you can also roll your own. Let\u2019s add an entry to the package.json scripts:<\/p>\n\n\n
\/\/ package.json<\/span>\n  \"scripts\"<\/span>: {\n+    \"analyze\"<\/span>: \"cem analyze --litelement --globs \\\"src\/**\/*.ts\\\"\"<\/span>,<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Now lets run the analyzer pnpm analyze<\/code> and it writes custom-elements.json to disk.<\/p>\n\n\n\n
Auto-Generate the Storybook Stories File<\/h2>\n\n\n\n
Having the manifest, we can make our first use of it. As we will see, it can do most of the configuration part of a .stories file for us. Let\u2019s install Storybook first: <\/p>\n\n\n\n
pnpm create storybook@latest<\/pre>\n\n\n\n
Then we need some initial wiring between Storybook and the manifest file. We will use a helper tool for that: <\/p>\n\n\n\n
pnpm i -D @wc-toolkit\/storybook-helpers<\/pre>\n\n\n\n
Add the following to our existing .storybook\/preview.ts<\/code>:<\/p>\n\n\n
import<\/span> { setCustomElementsManifest } from<\/span> \"@storybook\/web-components-vite\"<\/span>;\nimport<\/span> { setStorybookHelpersConfig } from<\/span> \"@wc-toolkit\/storybook-helpers\"<\/span>;\nimport<\/span> { withActions } from<\/span> 'storybook\/actions\/decorator'<\/span>;\nimport<\/span> manifest from<\/span> \"..\/custom-elements.json\"<\/span> with<\/span> { type<\/span>: \"json\"<\/span> };\n\nsetCustomElementsManifest(manifest); \/\/ (1)<\/span>\nsetStorybookHelpersConfig({  hideArgRef: true<\/span>, }); \/\/ (2)<\/span>\n\nconst<\/span> preview: Preview = {\n  \/\/ existing config here<\/span>\n  tags: ['autodocs'<\/span>], \/\/ (3)<\/span>\n  decorators: [withActions], \/\/ (4)<\/span>\n}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
The first function call (1) <\/strong>makes our manifest available as a global in all stories files. The second (2) <\/strong>configures the helpers that we will use in the next step. Autodocs (3)<\/strong> adds a auto generated Docs page for each stories file, which includes a table with the component API definition and a preview for each story. The withActions decorator (4)<\/strong> is needed to display events that our component emits in Storybook\u2019s Actions panel.<\/p>\n\n\n\n
Now let\u2019s create a stories file for our button:<\/p>\n\n\n\n
touch src\/my-button\/my-button.stories.ts.<\/pre>\n\n\n
\/\/ src\/my-button\/my-button.stories.ts<\/span>\nimport<\/span> type<\/span> { Meta, StoryObj } from<\/span> \"@storybook\/web-components-vite\"<\/span>;\nimport<\/span> { getStorybookHelpers } from<\/span> \"@wc-toolkit\/storybook-helpers\"<\/span>;\nimport<\/span> \".\/my-button\"<\/span>;\nimport<\/span> type<\/span> { MyButton } from<\/span> \".\/my-button\"<\/span>;\n\nexport<\/span> const<\/span> { events, args, argTypes, template } =\n  getStorybookHelpers<MyButton>(\"my-button\"<\/span>);\n\nconst<\/span> meta = {\n  title: \"Components\/Button\"<\/span>,\n  component: \"my-button\"<\/span>,\n  argTypes,\n  args: { ...args, \"default-slot\"<\/span>: \"Click me\"<\/span> },\n  render: (args<\/span><\/span>) =><\/span> template(args),\n  parameters: { actions: { handles: events } },\n} as<\/span> Meta<MyButton>;\n\nexport<\/span> default<\/span> meta;\nexport<\/span> const<\/span> Primary: StoryObj<MyButton> = {};<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
If you are familiar with typical stories files, you will notice that this one is very succinct. We can infer events, args, argTypes and even the template from the manifest data.<\/p>\n\n\n\n
Now lets run Storybook.<\/p>\n\n\n\n
pnpm storybook<\/pre>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
Notice how this documents the interface of the component extensively. We see the attribute and the default slot, each with description and even the options \u201cprimary\u201d and \u201csecondary\u201d. Also the controls are fully functional. <\/p>\n\n\n\n
Get Editor Support with the VSCode Language Server<\/h2>\n\n\n\n
Another application for the manifest file is editor support. First, we install the Web Components Language Server extension for VSCode<\/a>. To see it in action we add a new story, where we write the template ourselves:<\/p>\n\n\n
\/\/ src\/my-button\/my-button.stories.ts<\/span>\n\/\/ ...existing code<\/span>\n\nexport<\/span> const<\/span> Variants: StoryObj<MyButton> = {\n  render: ()<\/span> =><\/span> `\n    <my-button variant=\"primary\">Primary<\/my-button>\n    <my-button variant=\"\">Secondary<\/my-button>\n  `<\/span>,\n};<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Hovering over reveals a lot of useful IntelliSense information.<\/p>\n\n\n\n
\"A<\/figure>\n\n\n\n
Hitting ctrl space<\/code> shows the available options for the variant attribute.<\/p>\n\n\n\n
\"Code<\/figure>\n\n\n\n
Ground Copilot with the MCP server<\/h2>\n\n\n\n
Wouldn\u2019t it be nice if GitHub copilot had the same information? For this, we enable the MCP server<\/a> that is part of the language server extension.<\/p>\n\n\n
\/\/ ~\/Library\/Application Support\/Code\/User\/settings.json<\/span>\n\/\/ ...existing configuration<\/span>\n\n\n  \"wctools.mcp.enabled\"<\/span>: true<\/span>,\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
Now we can ask the AI agent about our web components by @-mentioning the MCP server.<\/p>\n\n\n\n
\"A<\/figure>\n\n\n\n
While this seems trivial in this example, it helps to ground the LLM and makes it less likely to hallucinate components or properties.<\/p>\n\n\n\n
Ensure Components are Used Correctly with the Web Components Linter<\/h2>\n\n\n\n
But what if you already have a lot of code and want to make sure the components are used correctly. This is where the Web Component Linter<\/a> into play. Install it with:<\/p>\n\n\n\n
pnpm add @wc-toolkit\/wctools<\/pre>\n\n\n
\/\/ package.json<\/span>\n<\/span><\/span>  \"scripts\"<\/span>: {\n<\/span><\/span>\t\/\/ ...existing scripts<\/span>\n<\/span><\/span>+      \"lint\"<\/span>: \"wctools validate\"<\/span>\n<\/span><\/mark>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
Running this…<\/p>\n\n\n\n
pnpm lint<\/pre>\n\n\n\n
… checks the entire codebase against what is written in manifest. If my AI agent had invented a tertiary variant that does not exist <my-button variant=\"tertiary\">Tertiary<\/my-button><\/code> the linter would catch it.<\/p>\n\n\n\n
\"Error<\/figure>\n\n\n\n
Note that the naming here is a bit confusing, there is also the CEM Validator<\/a>, which looks at the manifest file itself.<\/p>\n\n\n\n
Future Ideas<\/h2>\n\n\n\n
Looking at the future, I think there is a lot more that we could do with the Custom Elements Manifest! Component tests need a template, so why not use a helper that generates these, similar to the one for Storybook? Same for Figma Code Connect files.<\/p>\n\n\n\n
Recommended Podcasts: <\/p>\n\n\n\n
First we need to install the Custom Elements Analyzer<\/a>:<\/p>\n\n\n\n