Unknown attribute false positive

[JimSchofield]

Stackblitz with issue: (run lit-analyzer src to see output)
https://stackblitz.com/edit/vitejs-vite-o6yr4r?file=src%2Fmy-element.ts

output

❯ lit-analyzer src
Analyzing 2 files...

./src/my-element.ts

    Unknown attribute 'password-toggle'. Did you mean '?passwordToggle'?
    13:  ?password-toggle=${this.passwordToggle}
    no-unknown-attribute


  ✖ 1 problem in 1 file (0 errors, 1 warning)

We can verify that the attribute exists on the shoelace component:
https://github.com/shoelace-style/shoelace/blob/next/src/components/input/input.component.ts#L122

It seems to happen only when strict is used in the tsconfig

Originally posted by @JimSchofield in #181 (comment)

[danwenzel]

We're experiencing this as well. Any ideas here?

It seems like the analyzer isn't respecting the attribute value at all:

@property({ attribute: 'hide-label', type: Boolean })
hideLabel = false;

Unknown attribute 'hide-label'. Did you mean '?hideLabel'?

It just happens to pass if it's only one word, since in that case the property name and the attribute name are the same

[JackRobards]

This happens when lit-analyzer doesn't have access to the direct source file. Like in this instance when installing a package like @shoelace-style.

To get around this, I believe you may be able to add either an @attr or @attribute JSDoc annotation to the component if you have access to it. Like is described in the custom element manifest here:
https://custom-elements-manifest.open-wc.org/analyzer/getting-started/#supported-jsdoc

So if you have a component definition like this

/**
 * @attr hide-label - Hide the label.
 */
@customElement("my-element")
export class MyElement extends LitElement {
  @property({ attribute: "hide-label", type: Boolean })
  hideLabel = false;

...

}

Then lit-analyzer should be able to detect the attribute where it is used. e.g. <my-element ?hide-label=${true}></my-element>

Unfortunately, this means you have to duplicate the attribute name in two places if you want it to work with lit-analyzer in it's current form.

As for why this is, my understanding is that lit-analyzer currently checks two different types of files (technically the web-component-analyzer package actually does this analysis):

• The direct TS/JS source file, if it has access to it. Meaning that the component is defined in the same package where it is being used. That is why the tests mentioned in no-unknown-attribute: false positive when using attribute in property decorator #181 were passing - lit-analyzer looks for and understands the @property({ attribute: "hide-label", type: Boolean }) syntax in this case.
• If it is an external package (like shoelace), then it "analyzes the HTMLElement declaration found in "lib.dom.d.ts" source file provided by Typescript." (taken from a comment in the web-component-analyzer source code). This TS file by default has no knowledge of the password-toggle attribute that Lit adds via the decorator since lit seemingly doesn't add this to the type definition for some reason. This .d.ts file does preserve JSDocs though, which lit-analyzer can analyze to find the name of the attribute.

To avoid having to add the @attr annotation, I think either:

• Lit would need to add this information to the .d.ts file for the component in some manner, and the package would need to be updated to understand that. I'm not sure if there's a good reason it doesn't currently, or it does in some manner that I am just missing.
• This package would need to be updated to understand provided custom element manifest file(s) like the one shoelace provides. That also includes the attribute information.