rizalamar/index.html

## index.html
<!DOCTYPE html>
<html lang="id">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Custom Element</title>
	</head>
	<body>
    <my-header></my-header>

		<script type="module"></script>
	</body>
</html>

## my-header.js
class MyHeader extends HTMLElement {
	constructor() {
		super();
		this.innerHTML = `<button style="background: blue; color: white;">Klik aku!</button>`;

		// pastikan event listener hanya untuk tombol!
		this.querySelector("button").addEventListener("click", () => {
			const headerText = document.createElement("h1");
			headerText.textContent = "Ini Judul Website!";

			document.body.append(headerText);
		});
	}
}

customElements.define("my-header", MyHeader);
	<!DOCTYPE html>
	<html lang="id">
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Custom Element</title>
	</head>
	<body>
	<my-header></my-header>

	<script type="module"></script>
	</body>
	</html>