Lifecycle

connectedCallback

The connectedCallback is called when the component is connected to the DOM. This can be either when an element is appended explicitly:

import Wafer from "@lamplightdev/wafer";

class MyExample extends Wafer() {
  connectedCallback() {
    // always call Wafer's connectedCallback method
    super.connectedCallback();

    console.log("connected");
  }
}
customElements.define("my-element", MyExample);

const el = document.createElement("my-element");
// calls constructor

document.body.append(el);
// calls connectedCallback
// logs `connected`

or when an element is implicitly connected when it is inserted into the DOM, either in JavaScript:

const div = document.querySelector("div");

div.innerHTML = "<my-element></my-element>";
// calls constructor, and connectedCallback
// logs `connected`

or when parsed in HTML:

<div>
  <my-example></my-example>
  <!-- calls constructor, and connectedCallback when parsed -->
  <!-- logs `connected` -->
</div>

connectedCallback is also called if the element already exists in the DOM when the element becomes defined.