Skip to content
Foxipa
Code Completion 3 Challenges

Complete the custom element

Complete an autonomous custom element with registration, lifecycle behavior, and observed attributes.

Advanced ~6 min read

Challenge 1

Complete the class declaration so the component extends HTMLElement.

javascript Your answer 
 {
  static observedAttributes = ["status"];

  constructor() {
    super();
  }
}

customElements.define("status-card", StatusCard);

Press Ctrl⌘Enter to check your answer

Challenge 2

Add the observed attribute declaration for status.

javascript Your answer 
class StatusCard extends HTMLElement {
  

  constructor() {
    super();
  }
}

Press Ctrl⌘Enter to check your answer

Challenge 3

Register the autonomous custom element with the required hyphenated name.

javascript Your answer 
class StatusCard extends HTMLElement {
  constructor() {
    super();
  }
}

Press Ctrl⌘Enter to check your answer