Custom HTML Elements

Hard
32
6
14.1% Acceptance

Overview

In this lab, you'll work with Custom Elements API to create a custom HTML element named my-card. This element will extend a 'div' HTMLElement. You will use a constructor to create a shadow root for your custom element, set the color of the my-card element to blue, and finally add an h1 element with the text 'Hello, World!'.

Concepts

This lab primarily explores Custom Elements API, part of Web Components technologies. The key concepts required for this lab include:

  1. Custom Elements: This allows developers to define their own custom HTML tags.
  2. Shadow DOM: This provides encapsulation by allowing attachment of a hidden separated DOM to an element.
  3. HTMLElement: The base class for all HTML elements

If you're hearing about Custom Elements for the first time, you can read about them on MDN Docs first.

Steps

Follow these detailed steps to implement the task:

  1. Create the 'MyCard' class: Begin by defining MyCard as a class that extends the HTMLElement class using ES6. Make sure that this class will form the blueprint for your custom my-card element.

  2. Add a constructor: Within the 'MyCard' class, declare a constructor that calls the super() function to call the parent class (HTMLElement) constructor.

  3. Create a Template and Attach to the Shadow Root: Inside the constructor, create a template element and set its innerHTML with the desired content. Finally, attach the template.content.cloneNode(true) to the this.shadowRoot.

  4. Define the Custom Element: After creating the 'MyCard' class, you need to define your custom element. This is done using customElements.define(), where the first parameter is the name of your element and the second is the class that controls its behavior.

Hints

  1. Remember that your innerHTML should include a style tag that sets the color of the my-card element to blue and an h1 with the text 'Hello, World!'.
  2. Don't forget to use attachShadow() with {mode: 'open'} to create a shadow root.
  3. When appending the template content to the shadow root, use .cloneNode(true) as this performs a deep clone of the node, including all its child elements.
  4. To define your custom element, ensure that the name 'my-card' contains a dash (-). This is a requirement for the custom elements' naming convention.

All the best!