Support property and attribute with different types/descriptions

[adriengibrat]

I reproduced a native button behaviour in one of my component:

• the form attribute is a string
• the form property is a read-only HTMLFormElement or null

But I can't make web-component-analyzer understand that specific case, it alway merge attribute and property with same name and the property type & description overwrite attribute :/

A minimal example to reproduce the issue:

/**
 * A form button
 * @attribute {String} form - The id of a form to attach
 */
export class FormButton extends HTMLElement {
  /**
   * Attached form
   * @property form - Attached form
   * @type {HTMLFormElement|null}
   * @readonly
   */
  get form() {
    const id = this.getAttribute('form');
    return id && this.ownerDocument.querySelector(`#${id}`) || this.closest.('form');
  }
}
customElements.define("form-button", FormButton);

output

# form-button

A form button

## Properties

| Property | Attribute | Type                    | Description   |
|----------|-----------|-------------------------|---------------|
| `form`   | `form`    | `HTMLFormElement\|null` | Attached form |

same in json...

P.S. Thanks for this awesome project, I'm using it to generate custom-elements.json consumed by storybook docs addon.

[tevey]

Any update on this?