super.disconnectedCallback() is no longer present

[Westbrook]

Description

super.disconnectedCallback() having been removed from LitElement puts pressure on the element developer to make a clear decision as to how to address the possible presence of this method at various extension and mixin levels. Further, it makes for the possibility that there would need to be a future breaking change in LitElement where core functionality needed in this callback.

Live Demo

https://glitch.com/edit/#!/five-latex?path=index.html:39:50

Steps to Reproduce

1. Create an element
2. Add a disconnectedCallback method.
3. Call super.disconnectedCallback() in it.
4. Disconnect the element and see the error.

Expected Results

No error. Or clear documentation of the approach to this.

Actual Results

Uncaught TypeError: (intermediate value).disconnectedCallback is not a function
at HTMLElement.disconnectedCallback ((index):25)
at (index):36

Browsers Affected

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

Versions

• lit-element: ^0.6.0
• webcomponents: latest

[aadamsx]

Thanks @Westbrook. I've never used disconnectedCallback(), will you explain how it's used and when to use it? And If it's needed, why in the heck was it removed do you thihnk?

[Westbrook]

@aadamsx disconnectedCallback() is the lifecycle method supplied by the browser to do work when a custom element is removed from the DOM. Generally, I use it for things like removing event listeners I may have added to elements outside of the scope of the template for my component, disconnecting IntersectionObservers, or other long running interactions with the DOM or thread that I'd applied imperatively.

For the most part, you don't need a disconnectedCallback so in the move from https://github.com/Polymer/polymer/blob/master/lib/mixins/properties-mixin.js (which applied it in a protected manner so as not to overwrite any application is was mixed into) to an all internal lit-element it likely got forgotten. It's possible that this is the correct case, and this should simply be documented as such, however that would mean that were lit-element to want to use this callback to do something later, there would be a breaking update required.

To prevent the need for a breaking update, I've submitted a PR to apply a blank disconnectedCallback to lit-element, a change that was brought up by Justin in the Slack channel when discussing this context. There may be some extra comments of TS magic that I missed, but if it's agreed to be the right path forward, hopefully it's quick to be merged.

[sorvell]

Yeah, this was an oversight in version 0.6. I think it makes sense to add back for the reasons stated. (PR welcome)

[Westbrook]

Happy to help @sorvell #213 is looking forward to your review. I have a note there as to a possible alternate approach based on technique in properties-mixin.js and look forward to seeing this back in the repo!

[cstsortan]

I've been unsubscribing my observables in disconnectedCallback :/ does this mean that they're never actually being unsubscribed? :/

[Westbrook]

@cstsortan Currently, if you are using this directly, you should not have any issues. disconnectedCallback is provided by the specification as a lifecycle method and both native and polyfilled implementations of custom elements give access to it.

The change outlined here would support users moving from older version of lit-element where there was an instance of disconnectedCallback that could be accessed via super.disconnectedCallback() for whom the move to 0.6.0 will have caused an error due to the removal of that instance. Further, it would prepare for adding functionality at this part of the life cycle in the future without additional breaking changing.