Warn when super.connectedCallback() is not called.

[dgp1130]

Description

I've made the mistake several times where I override connectedCallback() and disconnectedCallback() to set up event listeners and forget to call super.connectedCallback() or super.disconnectedCallback(). This makes the element not initialize and render() is never called. This is really awkward and hard to understand what is going on here. I think the framework should warn that the super methods have not been called.

I'm not sure exactly how to implement this, since LitElement won't ever receive the callback and doesn't necessarily know it was a developer mistake. However, this could be as simple as "if connectedCallback() is not called after 5 seconds, it's probably a developer error and warn to the console". I'm not sure if there are other practical instances where this warning might be erroneously triggered.

Live Demo

https://stackblitz.com/edit/lit-element-example-vtmnmx?file=index.js
(Element does not render because I forgot to call super.connectedCallback(). This is tricky to debug and the framework should help with that.)

Steps to Reproduce

1. Override connectedCallback().
2. Don't call super.connectedCallback().

Expected Results

LitElement should warn that super.connectedCallback() was never called.

Actual Results

Element does not render.

Browsers Affected

(I'm assuming this is all browsers, I only tested Chrome)

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Versions

• lit-element: vX.X.X
• webcomponents: vX.X.X

[justinfagnani]

We would have to do this in a linter.

cc @runem @rictic

[runem]

The check is being implemented in eslint-plugin-wc eslint plugin. See these two issues:

• connectedCallback super 43081j/eslint-plugin-lit#36
• connectedCallback super 43081j/eslint-plugin-wc#32

I also created an issue for it at runem/lit-analyzer#57 :-)

[kevinpschaaf]

Warning when failing to super to a lifecycle call is generally not possible in LitElement code itself, so we'll close this issue in favor of warning via linters; please follow the issues above for progress.