html
html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Custom Component using HTMLElement</title>
</head>
<body>
<alert-me>Hello World!</alert-me>
<alert-me>Hello again!</alert-me>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class AlertComponent extends HTMLElement {
connectedCallback() {
alert(this.innerHTML);
this.innerHTML = "alert done";
}
}
window.onload = load;
function load() {
window.customElements.define('alert-me', AlertComponent);
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run