Skip to content

Instantly share code, notes, and snippets.

@aaronshaf
Last active November 24, 2016 00:00
Show Gist options
  • Save aaronshaf/25c571dcd6e987803035e4e4fe62a1ef to your computer and use it in GitHub Desktop.
Save aaronshaf/25c571dcd6e987803035e4e4fe62a1ef to your computer and use it in GitHub Desktop.

Your First Custom Element in Five Easy Steps

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/custom-elements@1.0.0-alpha.3"></script>

Further reading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment