-
-
Notifications
You must be signed in to change notification settings - Fork 111
Expand file tree
/
Copy pathmy-button.js
More file actions
38 lines (30 loc) · 758 Bytes
/
Copy pathmy-button.js
File metadata and controls
38 lines (30 loc) · 758 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
fetch('my-button.css').then(t => t.text()).then(css => {
class MyButton extends HTMLElement {
// bind once the component Shadow DOM
constructor() {
super();
this.html = hyperHTML.bind(
this.attachShadow({mode: 'closed'})
);
}
// render once connected
connectedCallback() {
this.render();
}
// do something on click
onclick(event) {
event.preventDefault();
alert('clicked');
}
// render whenever it's necessary
render() {
this.html`
<style>${css}</style>
<button onclick="${this.onclick}">
click ${this.nodeName.toLowerCase()}
</button>`;
}
}
// register the component
customElements.define('my-button', MyButton);
});