@storybook/web-components overrides properties with slots if they share a name

[iOvergaard]

Describe the bug Using @storybook/web-components with setCustomElements from a schema created by something like web-component-analyzer with the Lit library, if you have a property and a slot with the same name, the slot will take precedence and override the other resulting in only showing the documentation for the slot.

That means when the custom-elements.json file looks like this, I would expect to see both in the docs table in Storybook, but only the slot is shown.

[
  {
    "properties": [
      {
        "name": "headline",
        "description": "The headline property"
      }
    ],
    "slots": [
      {
        "name": "headline",
        "description": "This is the description of the headline slot"
      }
    ]
  }
]

One other thing to mention: If you have a default slot it goes into the custom-elements.json with an empty "name" property and as a result is not shown in Storybook at all. I believe this should show up some how, but I don't know how one could interact with such a thing without a name. Perhaps it could have a common name like "slot"?

To Reproduce

Repository with reproduction using web-component-analyzer:

https://github.com/iOvergaard/storybook-webcomponents-repro

There is a single web component which has:

1. A property named "label"
2. A slot named "label"
3. A default slot (no name)

Expected result All three items should show up in the "Docs" section at least with a separate row in the documentation table.

Actual result Only no. 2 (a slot named label) shows up:

System

Environment Info:

  System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 99.0.4844.74
    Safari: 15.4
  npmPackages:
    @storybook/addon-a11y: 6.4.19 => 6.4.19 
    @storybook/addon-actions: 6.4.19 => 6.4.19 
    @storybook/addon-essentials: 6.4.19 => 6.4.19 
    @storybook/addon-links: 6.4.19 => 6.4.19 
    @storybook/web-components: 6.4.19 => 6.4.19 

Additional context Looks like the error starts here: https://github.com/storybookjs/storybook/blob/1d36b02969fcf3d05543e5d9ae846949a6f45c6e/addons/docs/src/frameworks/web-components/custom-elements.ts#L145

[softdays]

Hi @iOvergaard, unless I'm mistaken it seems that there is no webcomponent in your repo.

Maybe you just forgot to push something?

[iOvergaard]

@softdays You are absolutely correct. How embarrassing! The repo is updated now with a component that should work!

Edit: I also updated the repo to the latest alpha.50 for posterity's sake

[patrickcate]

This is also happening with Vue, which also has the concept of slots.