---
title: "Custom Elements with ES6"
description: "Creating Web Components custom elements using ES6 classes. Practical notes and code examples on Custom Elements with ES6 by."
url: "https://h3manth.com/scribe/custom-elements-with-es6/"
canonical_url: "https://h3manth.com/scribe/custom-elements-with-es6/"
markdown_url: "https://h3manth.com/scribe/blog/custom-elements-with-es6.md"
publishDate: "2015-01-06T00:00:00.000Z"
author: "Hemanth HM"
category: "web"
tags: ["web","webcomponents","es6"]
word_count: 104
reading_time_minutes: 1
x_markdown_tokens: 301
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# Custom Elements with ES6

> Creating Web Components custom elements using ES6 classes. Practical notes and code examples on Custom Elements with ES6 by.

Custom Elements are key to Web Components:

- Define new DOM elements
- Extending from other elements
- Extending DOM APIs
- Providing custom functionality to a single tag

## ES6 Class Boilerplate

```javascript
class CustomElement extends HTMLElement {
  // Fires when an instance is created
  createdCallback() {}
  
  // Fires when inserted into the document
  attachedCallback() {}
  
  // Fires when removed from the document
  detachedCallback() {}
  
  // Fires when an attribute changes
  attributeChangedCallback(attr, oldVal, newVal) {}
}

document.registerElement('custom-element', CustomElement);

## Extending HTMLSpanElement
javascript
class DateSpan extends HTMLSpanElement {
  createdCallback() {
    this.textContent = "Today's date: " + new Date().toJSON().slice(0, 10);
  }
}

document.registerElement('date-today', DateSpan);
```