Why should I not access attributes in the constructor?

The spec forbids reading attributes, children or the parent in the constructor, because an element created via document.createElement is not yet upgraded and an element parsed from HTML may have its constructor run before its attributes and children are present. Do that work in connectedCallback instead, where the element is in the DOM.

When does attributeChangedCallback fire?

It fires for any attribute listed in the static observedAttributes getter — once for each such attribute already present when the element is upgraded, and then again whenever that attribute is added, changed or removed. Attributes not in observedAttributes never trigger it.

Can connectedCallback run more than once?

Yes. It runs every time the element is inserted into a document, so moving a node out of and back into the DOM fires disconnectedCallback then connectedCallback again. Make your connect logic idempotent and tear it down in disconnectedCallback.

What is adoptedCallback for?

adoptedCallback fires when the element is moved to a new document, for example via document.adoptNode when transferring a node between an iframe and the main page. It is rarely needed but lets you re-bind document-specific resources.

Where should I attach a shadow root?

Attach the shadow root in the constructor with this.attachShadow, because it does not depend on the DOM and avoids re-attaching every time the element reconnects. Render content into it in connectedCallback once the element is live.

Web Components Lifecycle Callbacks

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Custom elements expose a small set of lifecycle callbacks that the browser invokes at well-defined moments. This reference lists each one, when it fires, and what work belongs there.

How it works

You define callbacks as methods on a class extending HTMLElement:

class MyEl extends HTMLElement {
  static get observedAttributes() { return ["value"]; }
  constructor() { super(); this.attachShadow({ mode: "open" }); }
  connectedCallback() { /* in the DOM — render, add listeners */ }
  disconnectedCallback() { /* removed — clean up listeners/timers */ }
  attributeChangedCallback(name, oldV, newV) { /* observed attr changed */ }
  adoptedCallback() { /* moved to a new document */ }
}
customElements.define("my-el", MyEl);

The ordering rule that trips people up: the constructor may run before the element’s attributes and children exist (or before it is even in a document), so it must not touch them. Anything that reads the DOM, attributes, or parent belongs in connectedCallback.

Tips and notes

connectedCallback / disconnectedCallback can fire multiple times as the node moves around the DOM. Make connect logic idempotent; always remove listeners and timers on disconnect.
attributeChangedCallback only fires for attributes named in the static observedAttributes array — and it fires once per such attribute already set at upgrade time.
Attach the shadow root in the constructor (it has no DOM dependency); render into it on connect.
Use adoptedCallback only when you move nodes between documents (rare).