DoneJS StealJS jQuery++ FuncUnit DocumentJS
6.6.1
5.33.3 4.3.0 3.14.1 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-bind
      • can-compute
      • can-debug
      • can-deep-observable
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-compat
      • can-map-define
      • can-observable-array
      • can-observable-object
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Views
      • can-attribute-observable
      • can-component
      • can-observable-bindings
      • can-stache
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
        • static
          • view
          • props
        • lifecycle methods
          • connectedCallback
          • initialize
          • render
          • connect
          • disconnectedCallback
          • disconnect
          • bindings
        • lifecycle hooks
          • connected
          • disconnected
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-parser
      • can-view-scope
      • can-view-target
      • steal-stache
    • Data Modeling
      • can-connect
      • can-connect-ndjson
      • can-connect-tag
      • can-define-realtime-rest-model
      • can-define-rest-model
      • can-fixture
      • can-fixture-socket
      • can-local-store
      • can-memory-store
      • can-ndjson-stream
      • can-query-logic
      • can-realtime-rest-model
      • can-rest-model
      • can-set-legacy
      • can-super-model
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-type
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

connectedCallback

  • Edit on GitHub

A lifecycle hook called after the element is inserted into the document.

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";

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>

Parameters

  1. props {Object}:

    The initial property values.

Returns

{Element}:

The element instance.

Purpose

StacheElement implements the custom element connectedCallback hook to:

  1. initialize the element with property values. These will be passed to initialize.
  2. render the stache view into the element.
  3. connect the element to the DOM.

The connectedCallback can be called to initiate these lifecycle methods. When creating an extended StacheElement, the connectedCallback should not be overwritten. Code that needs to run when an element is added to the page should be put in connected.

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 6.6.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news