Web Components are not Rendered in Storybook (Lit + Decorators + Typescript)

[pmwmedia]

Summary

I have created a simple button as web component with a simple story. Unfortunately, Storybook silently doesn't render my button in my story. The story page remains empty. I use Typescript, Vite, and Lit with decorators.

Additional information

My web component BaseButton.ts

import { html, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'

@customElement('base-button')
export class BaseButton extends LitElement {
  @property({ type: String })
  text = '<none>'

  render() {
    return html`<button>${this.text}</button>`
  }
}

My story BaseButton.stories.ts

import type { Meta, StoryObj } from '@storybook/web-components'

import { BaseButton } from './BaseButton'

const meta: Meta<typeof BaseButton> = {
  component: 'base-button',
}

export default meta

type Story = StoryObj<typeof BaseButton>

export const Basic: Story = {
  args: {
    text: "Hello World!",
  }
}

My main.ts

import { StorybookConfig } from '@storybook/web-components-vite'

const config: StorybookConfig = {
  stories: [
    "../components/**/*.stories.ts",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
  ],
  framework: {
    name: "@storybook/web-components-vite",
    options: {},
  },
};

export default config

Create a reproduction

https://stackblitz.com/edit/github-3rvbff?file=components%2FBaseButton.ts,components%2FBaseButton.stories.ts