storybookjs/storybook

[Bug]: Web Components are not supported propperly

Open

#24,401 opened on Oct 6, 2023

View on GitHub
 (14 comments) (4 reactions) (0 assignees)TypeScript (10,058 forks)batch import
bughelp wantedstencilweb-components

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

Describe the bug

I just installed the latest storybook version inside my stencil project. To make the components available I register them to the window as Custom Elements (CustomElementRegistry) with stencils provided loader function. While creating stories now, I encounter the following problems:

  1. Loading content into slots is not supported at all, it's basic web component functionality, it should be supported in my opinion.
  2. Using the args inside my stories leads to attributeless "show code" results:

I guess I have to write my own generic renderer to solve these issues, but I feel like it should be supported by the @storybook/web-components framework. Also, I am a little confused about the existing storybook web component examples, they all seem not to work with web component technologies, but are just using some lit-html renderings to create some HTML instead of loading proper web components.

Additionally, I had to add "@babel/preset-typescript" to my .babelrc.json to make my stories compile, I guess it's rather framework-specific, but I wanted to mention it for future googlers.

To Reproduce

No response

System

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 20.3.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.7.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (117.0.2045.47)

Additional context

No response

Contributor guide