The Anatomy of a Web Component: Custom Elements

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

The first of these features we’ll look at is custom elements. This is a feature that allows us to create our own custom elements.

Once you create and register a custom element, you can use it in your HTML just like any other element.

You’ll first need to create a class that encapsulates the logic of our component, which can be done by extending the HTMLElement base class. This is the very same base class from which all other HTML elements extend. This means our custom element gets all the same plumbing under the hood as a button or a div element. This lets us do things like:

• Attach CSS styles to our element
• Hook into different parts of the component lifecycle
• Access properties like the element’s position and dimensions (via getBoundingClientRect())

Creating a class requires a few lines of code:

class OdysseyCopyright extends HTMLElement {
	constructor() {
		super();

		// The rest of the logic here is not specific to the custom elements featur```