Lit-element: [bug] Component fails to render when using connectedCallback

[alshdavid]

When adding a connectedCallback to a component, the html fails to render

@customElement('app-a')
class AComponent extends LitElement {
    connectedCallback() {
        console.log('ok')
    }

    render() {
        return html`<div>From TS A</div>`;
    }
}

See example below
https://stackblitz.com/edit/typescript-u5rsyv

[Westbrook]

You must call super when using lifecycle callbacks:

connectedCallback() {
        super.connectedCallback();
        console.log('ok')
}

[sorvell]

That's right. Call super.connectedCallback() and you're good to go.

[alshdavid]

Ok, would you see any value in patching the connectedCallback to call the super. connectedCallback from the createElement decorator?

[Westbrook]

When you write:

    connectedCallback() {
        console.log('ok')
    }

Into your component, you are effectively overwriting the functionality of connectedCallback() in LitElement yourself. If you don't call it super.connectedCallback() the important functionality that goes on there won't be called. It's not a matter of patching anything, it's a matter of maintaining the extend. Any of the web component lifecycles that you would like to take advantage of in your component will need to do the same to ensure that functionality in LitElement is accessed appropriately.

[souvikbasu]

This is on place where LitElement differs from the platform implementation of HTMLElement. In HTMLElement we do not have to call super in lifecycle methods, the code is a line lesser. Might be worth checking if we can make it same as the platform implementation

[jsilvermist]

@souvikbasu That's not really possible since the callbacks are what let both you and lit-element affect changes at different triggers in the dom, it would make no sense if lit-element had to recreate some convoluted method to mimic what's already available for it natively.

[LarsDenBakker]

This is simply how class inheritance works in javascript. If you extend a method and you want the super class to do it's work, you need to call super :)