lit-analyzer icon indicating copy to clipboard operation
lit-analyzer copied to clipboard

no-nullable-attribute-binding not working properly and cannot turn off

Open ggecy opened this issue 2 years ago • 2 comments

Hello, I have the following variable defined (and computed later on):

let className: string | null = null

and then used in a template

result = render(html`<span class="${ifDefined(className)}">${model.item.values[columnIndex]}</span>`, root);

which shows the following error for class attribute: This attribute binds the type 'string | null' which can end up binding the string 'null'. Use the 'ifDefined' directive and strict null check?lit-plugin(no-nullable-attribute-binding)(2314).

This shouldn't be an error according to official lit element documentation and implementation of ifDefined directive - it works with both undefined and null values and ignores the attribute : For AttributeParts, sets the attribute if the value is defined and removes the attribute if the value is undefined (undefined or null)

I have also tried setting the no-nullable-attribute-binding to off in settings yet the error is still shown.

ggecy avatar Apr 28 '22 19:04 ggecy

Just giving this a quick bump as I've otherwise been finding this lib incredibly helpful but this bug has really cramped my CI.

jesseditson avatar Jul 17 '23 16:07 jesseditson

This is definitely polluting my IDE with error messages that are not relevant. A quick patch that I use is to install the ts-lit-plugin and change error level in the tsconfig.json:

"plugins": [
        {
          "name": "ts-lit-plugin",
          "rules": {
            "no-nullable-attribute-binding": "warning",
          }
        }
      ]

Note that setting the rule value to "off" doesn't work

nathanbrnrd avatar Mar 12 '24 11:03 nathanbrnrd