• Version 7.6.17
  • Published
  • 63.8 kB
  • 9 dependencies
  • MIT license


npm i @storybook/web-components
yarn add @storybook/web-components
pnpm add @storybook/web-components


Storybook web-components renderer



variable configure

const configure: (loader: Addon_Loadable, module: NodeModule) => void;

    variable forceReRender

    const forceReRender: () => void;

      variable raw

      const raw: () => any;

        variable storiesOf

        const storiesOf: any;


          function getCustomElements

          getCustomElements: () => any;

            function isValidComponent

            isValidComponent: (tagName: string) => boolean;

              function isValidMetaData

              isValidMetaData: (customElements: any) => boolean;

                function setCustomElements

                setCustomElements: (customElements: any) => void;
                • Parameter customElements

                  any for now as spec is not super stable yet

                function setCustomElementsManifest

                setCustomElementsManifest: (customElements: any) => void;


                  interface WebComponentsRenderer

                  interface WebComponentsRenderer extends WebRenderer {}

                    property component

                    component: string;

                      property storyResult

                      storyResult: StoryFnHtmlReturnType;

                        Type Aliases

                        type Decorator

                        type Decorator<TArgs = StrictArgs> = DecoratorFunction<WebComponentsRenderer, TArgs>;

                          type Loader

                          type Loader<TArgs = StrictArgs> = LoaderFunction<WebComponentsRenderer, TArgs>;

                            type Meta

                            type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsRenderer, TArgs>;
                            • Metadata to configure the stories for a component.

                              See Also

                              • [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)

                            type Preview

                            type Preview = ProjectAnnotations<WebComponentsRenderer>;

                              type Story

                              type Story<TArgs = Args> = StoryFn<TArgs>;
                              • See Also

                                • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)


                                Use StoryFn instead. Use StoryObj if you want to migrate to CSF3, which uses objects instead of functions to represent stories. You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/

                                Story function that represents a CSFv2 component example.

                              type StoryContext

                              type StoryContext<TArgs = StrictArgs> = StoryContext$1<WebComponentsRenderer, TArgs>;

                                type StoryFn

                                type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsRenderer, TArgs>;
                                • Story function that represents a CSFv2 component example.

                                  See Also

                                  • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)

                                type StoryObj

                                type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsRenderer, TArgs>;
                                • Story function that represents a CSFv3 component example.

                                  See Also

                                  • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)

                                Package Files (2)

                                Dependencies (9)

                                Dev Dependencies (6)

                                Peer Dependencies (1)


                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/web-components.

                                • Markdown
                                • HTML
                                  <a href="https://www.jsdocs.io/package/@storybook/web-components"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>