Writing Vanilla Web Components

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

1

Exercise 1 of 1

Web Component Lifecycle: Where Does This Code Go?

Four code snippets — match each to the lifecycle callback where it belongs: constructor, connectedCallback, disconnectedCallback, or attributeChangedCallback.

Which lifecycle callback belongs here?

Match each code snippet to the callback where it should run.

this.shadow = this.attachShadow({ mode: "open" })
fetch("/api/beers").then(r => r.json()).then(data => { this.items = data; })
clearInterval(this._pollingInterval)
if (name === "theme") this.updateTheme(newValue)

Memory hook: constructor = setup, connectedCallback = mount, disconnectedCallback = cleanup, attributeChangedCallback = watch.

Re-read the lectureAll lectures →
Practice: Writing Vanilla Web Components — Interactive Exercises | Durgesh Rai