[Bug]: Webcomponents with no render function shows empty source code in Canvas

r1m commented 7 months ago

Describe the bug

Using a webcomponent renderer, the source code on Canvas/Source block is not correctly generated. The component is correctly rendered but the source code only shows an empty html element.

To Reproduce

Create a webcomponent story with component and args without custom render.

https://stackblitz.com/edit/github-mqfend?file=src%2Fstories%2Fmy-element.stories.ts

export default {
  component: 'my-element',
  title: 'My Element',
} as Meta;

export const Default: StoryObj = {
  name: 'Default',
  args: {
    name: 'Lit',
  },
};

It shows this has source code

<my-element></my-element>

The expected is

<my-element name="Lit"></my-element>

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.1.0-alpha.3 => 8.1.0-alpha.3 
    @storybook/addon-links: ^8.1.0-alpha.3 => 8.1.0-alpha.3 
    @storybook/blocks: ^8.1.0-alpha.3 => 8.1.0-alpha.3 
    @storybook/test: ^8.1.0-alpha.3 => 8.1.0-alpha.3 
    @storybook/web-components: ^8.1.0-alpha.3 => 8.1.0-alpha.3 
    @storybook/web-components-vite: ^8.1.0-alpha.3 => 8.1.0-alpha.3 
    storybook: ^8.1.0-alpha.3 => 8.1.0-alpha.3

Additional context

The actual DOM node inserted inside the story block returns the right outerHTML

$0.outerHTML
'<my-element name="Lit"></my-element>'

justinfagnani commented 2 months ago

I'm not sure that this is the expected source:

<my-element name="Lit"></my-element>

That is the resulting DOM after setting the .name property on the element. The source that would get that DOM the same way Storybook's renderer would depends on the library you use to render, ie Lit and React:

Lit:

html`<my-element .name=${'Lit'}></my-element>

React:

<my-element name={'Lit'} />

This would be more apparent with non-reflecting properties, where the attribute and properties don't match.

r1m commented 1 month ago

I agree that properties should not be reflected in the code. But attributes and reflecting attributes should. Right now unless I provide a custom render function, the code displayed in the canvas is always empty.

I expect the code to reflect the values set on the control like it does on react : https://master--5ccbc373887ca40020446347.chromatic.com/?path=/docs/badge--docs

Updated stackblitz with latest version and custom-element manifest https://stackblitz.com/edit/github-mqfend-rb55b5?file=src%2Fstories%2Fmy-element.stories.ts

storybookjs / storybook