custom-elements-intro.md

Your First Custom Element in Five Easy Steps

1. Install create-element-class

npm install create-element-class --save

2. Create the element

import createElementClass from 'create-element-class'

const HelloWorld = createElementClass({
  connectedCallback() {
    this.innerHTML = 'Hello, world!'
  }
})

3. Define the tag

customElements.define('hello-world', HelloWorld)

4. Use it!

<hello-world></hello-world>

5. Include a polyfill for non-Chrome browsers

npm install @webcomponents/custom-elements --save-dev

import '@webcomponents/custom-elements'

Or:

<script src="https://unpkg.com/@webcomponents/[email protected]"></script>

Further reading

• Custom Elements v1: Reusable Web Components, by Eric Bidelman
• Reintroducing Custom Elements V1, by Andrea Giammarchi
• The Case for Custom Elements: Part 1, by Rob Dodson