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

[r1m]

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]

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.