Show only attributes in Storybook for Lit components using Custom Elements Manifest

[Mwalthery]

Summary

Hi everyone,
We’re working on our design system and using a Custom Elements Manifest (CEM) to describe our components. Our components are built with Lit, and when we render them in Storybook, we notice that both attributes and properties are shown, which clutters the interface.
We would like only attributes to appear in Storybook (i.e., hide the duplicate property entries).
Here’s a minimal example of what we're defining in our component as property

    /**
     * If true, the segmented control stretches to fill the full width of its container.
     * This is reflected as the `full-width` attribute.
     *
     * @type {boolean}
     * @default false
     */
    @property({ type: Boolean, reflect: true, attribute: "full-width" })
    fullWidth = false;

Questions:
Is there a way to configure Storybook or the docs addon to show only attributes for Lit components?
Should we adjust our CEM generation instead?
Any guidance, examples, or references would be greatly appreciated!

Thanks in advance 🙏

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @Mwalthery! I'm Dosu and I’m helping the storybook team.

There isn't a built-in Storybook or docs addon setting to automatically show only attributes and hide properties for Lit components using a Custom Elements Manifest (CEM). By default, Storybook merges both attributes and properties from the CEM, which leads to the duplication you're seeing in the docs UI reference.

You have a few options to reduce this clutter:

• Manual filtering with controls/include or argTypes: You can use the controls.include parameter or manually disable controls for specific properties in your stories. For example, to only show certain attributes, set:

  export default {
    // ...
    parameters: {
      controls: {
        include: ['full-width', 'disabled', 'value'], // list only attribute names you want
      },
    },
  };

  Or, in argTypes, you can disable properties:

  export default {
    // ...
    argTypes: {
      fullWidth: { table: { disable: true } }, // hides the property
    },
  };

  See the official docs on controls filtering for more details.

• Custom CEM or wrapper: Some teams use plugins for @custom-elements-manifest/analyzer to filter out unwanted properties at CEM generation time, or wrap the setCustomElementsManifest call in Storybook to filter the manifest before passing it in reference. This approach is more advanced and lets you automate the filtering, but be careful—removing properties from the CEM may affect other tools that rely on that data.

• Custom argTypes extraction: For full control, you can override the argTypes extraction logic in your Storybook config to only include attributes from the CEM. This requires a bit of custom code, but it's the most robust way to ensure only attributes appear in the docs table.

Adjusting the CEM to exclude properties is not recommended unless you know it won't break other tooling. The most maintainable approach is to filter via Storybook's controls or argTypes configuration, or to preprocess the manifest before passing it to Storybook.

If you want a code example for a custom extraction function or a manifest wrapper, let me know!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}