connectedCallback super

[LarsDenBakker]

I've been doing a lot of workshops where people learn to use lit-html. One of the most common mistakes is to forget calling super.connectedCallback() when using lit-element.

This would be a good linting rule to add.

[stramel]

@LarsDenBakker, @43081j and I had previously discussed covering this in the eslint-plugin-wc at least for the standard hooks. 43081j/eslint-plugin-wc#15 (comment)

[LarsDenBakker]

I intentionally didn't put it there, since you can't know which base class does or doesn't implement connectedCallback. If you find a good heuristic for it, then it could go there as well.

[43081j]

Would you mind opening an issue in eslint-plugin-wc?

This would be a good rule. It can only really be detected by checking if the base class is HTMLElement or the class has a custom JSDoc annotation of @customElement.

This is the exact same reason why polymer-linter relied on the same JSDoc. A custom element's callbacks don't exist on an interface in the spec, they can exist or not on anything which can be registered as an element. Also, we can't do cross-file linting, which rules out inferring the base class through import traversal (because it goes against eslint conventions etc).

[stramel]

Yup, checking for the presence of the @customElement JSDoc and that the baseCalss is not HTMLElement, should allow us to assume that it is a standard customElement. That rule could be combined with the guard-super-call to ensure that you don't accidentally call a super method that doesn't exist/wasn't implemented.

The inverse of this rule could check that an element that is directly extending HTMLElement does NOT call super in the lifecycle hooks.

[LarsDenBakker]

Do you mean that the consumer should be required to add the @customElement annotation?

I'd prefer to either have this option in eslint-plugin-wc if it's possible to detect it in a good and performant way. Or just build it into eslint-plugin-lit as an opinionated option.

Another option is if you could set the base classes in the eslint-plugin-wc option, and eslint-plugin-lit configures it for you.

[43081j]

It belongs in the web components plugin rather than here, as the same detection algorithm would have to be used anyway if it was here.

Closing this in place of 43081j/eslint-plugin-wc#32

[WickyNilliams]

In the lit context, don't you always want to call super.connectedCallback? no detection algorithm needed?