Repository: storybook
Issue: [Bug]: Props tables for custom elements are inaccurate
Labels: bug,web-components,needs triage,lit

### Describe the bug

When creating web components using Lit, all properties are set up to have corresponding [attributes](https://lit.dev/docs/components/properties/#attributes) by default. After following the instructions [here](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components#props-tables) for generating pops table documentation, I noticed that only attributes where the name had [explicitly been set ](https://lit.dev/docs/components/properties/#observed-attributes) to use kebab case were displaying in the docs tab, despite having both `members` and `attributes` information in my `custom-elements.json` manifest.

Looking at the [code for extracting argTypes](https://github.com/storybookjs/storybook/blob/fd2ce3f18f26372cc082bfded019921d793e282a/code/renderers/web-components/src/docs/custom-elements.ts#L144) it's clear that this is due to properties overriding attributes except in those cases where the attribute name differs from the property name. With Lit it's also possible to prevent an observed attribute from being created by specifying `{ attribute: false }` - currently there's no way to determine if attributes are simply missing from the documentation or if their absence is intentional.

This has already been identified as an issue in https://github.com/storybookjs/storybook/issues/18858, but I think the fact that any overwriting is happening at all is the real problem, rather than the order in which overrides are occurring. Even with that proposed change to the order there will still be no way to achieve accuracy. What if a team has a use case where it's more important to document the properties? What if you want to document that both properties and attributes are available, despite the repetition? 

I've also run into issues with overwriting when trying to document `@csspart`s that share a name with a property or attribute. For example, if your component has a `header` property and attribute and you also want to expose and document `part="header"` you only end up seeing the CSS shadow part documentation in the table because it [overrides everything else](https://github.com/storybookjs/storybook/blob/fd2ce3f18f26372cc082bfded019921d793e282a/code/renderers/web-components/src/docs/custom-elements.ts#L154). This is avoidable with naming/annotation changes, but it seems less than ideal to have to change a component's interface to get around the limitations of the documentation tooling - especially considering that there's no real issue of naming collisions between CSS shadow parts and properties/attributes.

I've created an example that demonstrates these different issues using slightly modified code from the [`demo-wc-card` example](https://github.com/storybookjs/storybook/tree/next/code/renderers/web-components/template/stories/demo-wc-card). I'm not sure what the ideal solution is here - maybe just to embrace the repetition for now and in the longer term provide some way for consumers to specify what they want to see in the props table (maybe that exists already and I've missed it, in which case please let me know!).

### To Reproduce

```shell
https://github.com/hannajones/storybook-wc-args-table-repro

https://636d15e73f8f509c3e377975-gwiszopxhu.chromatic.com/?path=/docs/demo-wc-card--front
```


### System

```shell
System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node
    Yarn: 3.2.4 - ~/.nvm/versions/node/v16.9.1/bin/yarn
    npm: 7.23.0 - ~/.nvm/versions/node/v16.9.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 105.0.3
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-actions: ^6.5.13 => 6.5.13
    @storybook/addon-docs: ^6.5.13 => 6.5.13
    @storybook/addon-essentials: ^6.5.13 => 6.5.13
    @storybook/addon-links: ^6.5.13 => 6.5.13
    @storybook/builder-webpack4: ^6.5.13 => 6.5.13
    @storybook/manager-webpack4: ^6.5.13 => 6.5.13
    @storybook/web-components: ^6.5.13 => 6.5.13
```


### Additional context

_No response_