Skip to content

Instantly share code, notes, and snippets.

@gengns
Last active August 18, 2018 21:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gengns/a42b38c088d85ddece2ce2b9a00d7d0e to your computer and use it in GitHub Desktop.
Save gengns/a42b38c088d85ddece2ce2b9a00d7d0e to your computer and use it in GitHub Desktop.
Create your own native web component
box-element > div {
color: #555;
background: #00BCD4;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
class Box extends HTMLElement {
constructor(text) {
super()
this.text = text
}
connectedCallback() {
this.innerHTML = `<div>${this.text}</div>`
}
}
customElements.define('box-element', Box)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="box.css">
</head>
<body>
<script src="box.js"></script>
<script>
const box = new Box(`I'm a box`)
document.body.appendChild(box)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment