HTML · Web Components

Lifecycle Callbacks

Learn how to react to element changes throughout its lifetime with lifecycle methods

Find videos you like?

Save to resource drawer for future reference!

What are Lifecycle Callbacks?

Special methods that run at different stages of a custom element's life

Lifecycle callbacks are special methods in Web Components that automatically run when certain events happen to your custom element. They allow you to initialize the element, clean up resources, react to changes, and handle document movements.

Think of It Like Life Events 🌱

Just like a person has birth, growth, changes, and... well, you know. Your element has: creation → connected → attribute changes → disconnected.

connectedCallback

Called when element is added to the page

disconnectedCallback

Called when element is removed from the page

attributeChangedCallback

Called when observed attributes change

adoptedCallback

Called when element moves to new document

Lifecycle Flow

constructor()

Element is created (don't do DOM work here)

↓

connectedCallback()

Element added to page (render, fetch data, add listeners)

↓

attributeChangedCallback()

Attributes change (re-render, update state)

↓

disconnectedCallback()

Element removed (cleanup, remove listeners, cancel timers)

1. Connected & Disconnected

See when elements are added and removed from the page

Lifecycle Basics

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lifecycle Callbacks</title>
  </head>
  <body>
    <div class="container">
      <h1>🔄 Lifecycle Callbacks</h1>
      <div class="controls">
        <button class="add-btn" onclick="addElement()">
          ➕ Add Element (connected)
        </button>
        <button class="remove-btn" onclick="removeElement()">
          ➖ Remove Element (disconnected)
        </button>
      </div>
      <div id="element-container"></div>
      <div id="log"></div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

🎯 Key Points:

connectedCallback is where you do most initialization work
disconnectedCallback is for cleanup to prevent memory leaks
These can be called multiple times if element is moved around

2. Attribute Change Observer

React to attribute changes and re-render automatically

Reactive Attributes

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Observer</title>
  </head>
  <body>
    <div class="container">
      <h1>👀 Attribute Change Observer</h1>
      <div class="controls">
        <h2>Update Component Attributes</h2>
        <div class="control-group">
          <label>Theme</label>
          <select id="theme-select" onchange="updateTheme(this.value)">
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="purple">Purple</option>
            <option value="orange">Orange</option>
          </select>
        </div>
        <div class="control-group">
          <label>Size</label>
          <select id="size-select" onchange="updateSize(this.value)">
            <option value="small">Small</option>
            <option value="medium" selected>Medium</option>
            <option value="large">Large</option>
          </select>
        </div>
        <div class="control-group">
          <label>Title</label>
          <input type="text" id="title-input" value="Hello World"
            oninput="updateTitle(this.value)" placeholder="Enter title">
          </div>
          <p style="color: #6b7280; font-size: 14px; margin-top: 16px;">
            💡 Watch the console below to see attributeChangedCallback firing!
          </p>
        </div>
        <div id="demo-container">
          <reactive-card theme="blue" size="medium" title="Hello World"></reactive-card>
          </div>
          <div style="background: #1e293b; color: #e2e8f0; padding: 20px; border-radius: 16px; max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 13px;" id="console" class="console-log"></div>
        </div>
      </body>
    </html>

Live Preview

Loading preview...

How It Works

1. Declare observedAttributes static property
2. List attribute names to watch
3. attributeChangedCallback fires on changes
4. Re-render with new attribute values

3. Document Adoption (Advanced)

Handle elements moving between documents

Adopted Callback

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adopted Callback</title>
  </head>
  <body>
    <div class="container">
      <h1>📄 adoptedCallback Demo</h1>
      <div class="demo-area">
        <h2>🔄 Move Element Between Documents</h2>
        <div class="containers">
          <div class="container-box" id="doc1-container">
            <span class="container-label">📄 Document 1</span>
          </div>
          <div class="container-box" id="doc2-container">
            <span class="container-label">📄 Document 2 (New)</span>
          </div>
        </div>
        <div class="controls">
          <button onclick="createAndMove()">🎯 Create Element & Move Between Docs</button>
          <button onclick="resetDemo()">🔄 Reset Demo</button>
        </div>
        <p style="color: #6b7280; font-size: 14px; text-align: center; margin-top: 12px;">
          💡 Click the button to see adoptedCallback in action!
        </p>
      </div>
      <div id="log">
        <h3>📊 Lifecycle Events Log</h3>
        <div class="log-content" id="log-content"></div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

⚠️ When to Use:

• Moving elements between iframes
• Working with multiple documents
• Document-specific resources need updating
• Rarely needed in typical applications

Best Practices

Do This

✓Use connectedCallback for initialization and rendering
✓Clean up in disconnectedCallback (listeners, intervals)
✓Declare observedAttributes for reactive properties
✓Check oldValue !== null in attributeChangedCallback
✓Handle multiple connect/disconnect cycles

Avoid This

✗DOM work in constructor (use connectedCallback)
✗Forgetting to clean up resources
✗Throwing errors in lifecycle methods
✗Assuming callbacks are called only once
✗Expensive operations on every attribute change

Browser Support

Lifecycle callbacks are part of the Custom Elements v1 spec and supported in all modern browsers. Note: adoptedCallback has the same support as other callbacks but is less commonly used.

Previous Topic

Template Element

<template> for inert HTML fragments and reusable content.

Next Topic

Local Storage

localStorage API for persistent client-side data storage.

Ask a Question

Have a question about Lifecycle Callbacks? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Web Components

Lifecycle Callbacks

Learn how to react to element changes throughout its lifetime with lifecycle methods

Find videos you like?

Save to resource drawer for future reference!

What are Lifecycle Callbacks?

Special methods that run at different stages of a custom element's life

Think of It Like Life Events 🌱

Just like a person has birth, growth, changes, and... well, you know. Your element has: creation → connected → attribute changes → disconnected.

connectedCallback

Called when element is added to the page

disconnectedCallback

Called when element is removed from the page

attributeChangedCallback

Called when observed attributes change

adoptedCallback

Called when element moves to new document

Lifecycle Flow

constructor()

Element is created (don't do DOM work here)

↓

connectedCallback()

Element added to page (render, fetch data, add listeners)

↓

attributeChangedCallback()

Attributes change (re-render, update state)

↓

disconnectedCallback()

Element removed (cleanup, remove listeners, cancel timers)

1. Connected & Disconnected

See when elements are added and removed from the page

Lifecycle Basics

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lifecycle Callbacks</title>
  </head>
  <body>
    <div class="container">
      <h1>🔄 Lifecycle Callbacks</h1>
      <div class="controls">
        <button class="add-btn" onclick="addElement()">
          ➕ Add Element (connected)
        </button>
        <button class="remove-btn" onclick="removeElement()">
          ➖ Remove Element (disconnected)
        </button>
      </div>
      <div id="element-container"></div>
      <div id="log"></div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

🎯 Key Points:

connectedCallback is where you do most initialization work
disconnectedCallback is for cleanup to prevent memory leaks
These can be called multiple times if element is moved around

2. Attribute Change Observer

React to attribute changes and re-render automatically

Reactive Attributes

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Observer</title>
  </head>
  <body>
    <div class="container">
      <h1>👀 Attribute Change Observer</h1>
      <div class="controls">
        <h2>Update Component Attributes</h2>
        <div class="control-group">
          <label>Theme</label>
          <select id="theme-select" onchange="updateTheme(this.value)">
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="purple">Purple</option>
            <option value="orange">Orange</option>
          </select>
        </div>
        <div class="control-group">
          <label>Size</label>
          <select id="size-select" onchange="updateSize(this.value)">
            <option value="small">Small</option>
            <option value="medium" selected>Medium</option>
            <option value="large">Large</option>
          </select>
        </div>
        <div class="control-group">
          <label>Title</label>
          <input type="text" id="title-input" value="Hello World"
            oninput="updateTitle(this.value)" placeholder="Enter title">
          </div>
          <p style="color: #6b7280; font-size: 14px; margin-top: 16px;">
            💡 Watch the console below to see attributeChangedCallback firing!
          </p>
        </div>
        <div id="demo-container">
          <reactive-card theme="blue" size="medium" title="Hello World"></reactive-card>
          </div>
          <div style="background: #1e293b; color: #e2e8f0; padding: 20px; border-radius: 16px; max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 13px;" id="console" class="console-log"></div>
        </div>
      </body>
    </html>

Live Preview

Loading preview...

How It Works

1. Declare observedAttributes static property
2. List attribute names to watch
3. attributeChangedCallback fires on changes
4. Re-render with new attribute values

3. Document Adoption (Advanced)

Handle elements moving between documents

Adopted Callback

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adopted Callback</title>
  </head>
  <body>
    <div class="container">
      <h1>📄 adoptedCallback Demo</h1>
      <div class="demo-area">
        <h2>🔄 Move Element Between Documents</h2>
        <div class="containers">
          <div class="container-box" id="doc1-container">
            <span class="container-label">📄 Document 1</span>
          </div>
          <div class="container-box" id="doc2-container">
            <span class="container-label">📄 Document 2 (New)</span>
          </div>
        </div>
        <div class="controls">
          <button onclick="createAndMove()">🎯 Create Element & Move Between Docs</button>
          <button onclick="resetDemo()">🔄 Reset Demo</button>
        </div>
        <p style="color: #6b7280; font-size: 14px; text-align: center; margin-top: 12px;">
          💡 Click the button to see adoptedCallback in action!
        </p>
      </div>
      <div id="log">
        <h3>📊 Lifecycle Events Log</h3>
        <div class="log-content" id="log-content"></div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

⚠️ When to Use:

• Moving elements between iframes
• Working with multiple documents
• Document-specific resources need updating
• Rarely needed in typical applications

Best Practices

Do This

✓Use connectedCallback for initialization and rendering
✓Clean up in disconnectedCallback (listeners, intervals)
✓Declare observedAttributes for reactive properties
✓Check oldValue !== null in attributeChangedCallback
✓Handle multiple connect/disconnect cycles

Avoid This

✗DOM work in constructor (use connectedCallback)
✗Forgetting to clean up resources
✗Throwing errors in lifecycle methods
✗Assuming callbacks are called only once
✗Expensive operations on every attribute change

Browser Support

Lifecycle callbacks are part of the Custom Elements v1 spec and supported in all modern browsers. Note: adoptedCallback has the same support as other callbacks but is less commonly used.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Template Element

Local Storage

HTML Code Editor

Building Your Learning Module...

Lifecycle Callbacks

Think of It Like Life Events 🌱

connectedCallback

disconnectedCallback

attributeChangedCallback

adoptedCallback

Lifecycle Basics

🎯 Key Points:

Reactive Attributes

How It Works

Adopted Callback

⚠️ When to Use:

Do This

Avoid This

Browser Support

Template Element

Local Storage

HTML Code Editor

Lifecycle Callbacks

Think of It Like Life Events 🌱

connectedCallback

disconnectedCallback

attributeChangedCallback

adoptedCallback

Lifecycle Basics

🎯 Key Points:

Reactive Attributes

How It Works

Adopted Callback

⚠️ When to Use:

Do This

Avoid This

Browser Support