connected()

The connected hook is called by the connectedCallback when an element is added to the page. Code that needs to run when the element is in the page should be put in connected so that you do not need to worry about the rest of the lifecycle (you do not need to use super when implementing connected). The following example uses connected to increment a timer every second and returns a teardown function to clean up the timer:

<time-er></time-er>
<script type="module">
import { StacheElement } from "can/everything";

class Timer extends StacheElement {
    static view = `
        <p>{{this.time}}</p>
    `;
    static props = {
        time: { type: Number, default: 0 }
    };
    connected() {
        let intervalId = setInterval(() => {
            this.time++;
        }, 1000);

        return () => {
            clearInterval(intervalId);
        };
    }
}
customElements.define("time-er", Timer);
</script>