connectedCallback(props)

The browser calls a custom element's connectedCallback when the element is added to the page. StacheElement uses this to set up the element's properties, render its view, and call the connected lifecycle hook.

The connectedCallback can also be called manually to trigger these things. For example, the following defines a greeting property, uses it in the view, and also programmatically adds a <p> element in the connected hook:

import { StacheElement } from "can/everything";

class MyElement extends StacheElement {
  static view = `
      <p>{{this.greeting}}</p>
  `;
  static props = {
      greeting: { type: String, default: "Hello" }
  };
  connected() {
      const p = document.createElement("p");
      p.innerHTML = "World";
      this.appendChild(p);
  }
}
customElements.define("my-el", MyElement);

const myEl = new MyElement()
    .connectedCallback();

myEl.greeting;          // -> Hello
myEl.firstElementChild; // -> <p>Hello</p>
                        //    <p>World</p>