no-unknown-attribute: false positive when using attribute in property decorator

[scola84]

I have the following property:

@property({
  attribute: 'no-overflow',
  reflect: true,
  type: Boolean
})
public noOverflow?: boolean

When I use the attribute no-overflow in my html, I get the following error:

Unknown attribute 'no-overflow'. Did you mean '?noOverflow'? If you are not the author of this component
please consider using a 'data-*' attribute, adding the attribute to 'globalAttributes' or disabling the
'no-unknown-attribute' rule.lit-plugin(no-unknown-attribute)(2318)

[NeilujD]

Hi !
Any update regarding this ? Did you find a workaround @scola84 ?

[pmcelhaney]

I'm having the same problem. I added a test case #294 and I'm surprised that it passed.

[pmcelhaney]

Hmm, this minimal test case also works fine.

./src/my-element.ts`

import { property } from "lit/decorators";
import { LitElement, html } from "lit";

class MyElement extends LitElement {
  @property({ attribute: "some-attr" }) someAttr = "x";

  render() {
    return html`<my-element some-attr="x" missing-attr="y"></my-element>`;
  }
}
customElements.define("my-element", MyElement);

command:

npx lit-analyzer src --strict

output:

Analyzing 1 file...

./src/my-element.ts

    Unknown attribute 'missing-attr'. Did you mean 'some-attr'?
    10:  ment some-attr="x" missing-attr="y"></my-element>`
    no-unknown-attribute


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

[pmcelhaney]

Okay, it works, but it's broken when TypeScript > 4.7 is installed. Probably related to #272.

[pmcelhaney]

Ah, looks like #278 will fix it.

[JimSchofield]

I can reproduce this issue and we encountered it the other day using Shoelace components.

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