public/web-development/examples.git

Neue Datei
			@@ -0,0 +1,20 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Event Handling</title>
			<script defer src="event-handling.js"></script>
			</head>
			<body>
			<custom-a></custom-a>
			<custom-b></custom-b>
			<script>
			document.querySelector("custom-a").addEventListener("customevent", (event) => {
			alert("custom event a!");
			});
			document.querySelector("custom-b").addEventListener("customevent", (event) => {
			alert("custom event b!");
			});
			</script>
			</body>
			</html>

Neue Datei
			@@ -0,0 +1,47 @@
			class CustomA extends HTMLElement {
			constructor() {
			super();

			this.root = this.attachShadow({mode: "open"});

			this.root.innerHTML = `
			<button>Click Me!</button>
			`;
			}

			connectedCallback() {
			const button = this.root.querySelector("button");

			button.addEventListener("click", () =>{
			const event = new CustomEvent("customevent", { bubbles: true, composed: true});

			button.dispatchEvent(event);
			});
			}
			}

			window.customElements.define("custom-a", CustomA);

			class CustomB extends HTMLElement {
			constructor() {
			super();

			this.root = this.attachShadow({mode: "open"});

			this.root.innerHTML = `
			<button>Click Me!</button>
			`;
			}

			connectedCallback() {
			const button = this.root.querySelector("button");

			button.addEventListener("click", () =>{
			const event = new CustomEvent("customevent", { bubbles: true});

			button.dispatchEvent(event);
			});
			}
			}

			window.customElements.define("custom-b", CustomB);

Neue Datei
			@@ -0,0 +1,16 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Tab Component</title>
			<script defer src="tab-component.js"></script>
			</head>
			<body>
			<tab-component>
			<span slot="tab" tab-id="tab-a">Tab A</span>
			<span slot="tab" tab-id="tab-b">Tab B</span>
			<div slot="content" tab-id="tab-a">Passender Text zu Tab A!</div>
			<div slot="content" tab-id="tab-b">Ein anderer Text zu Tab B!</div>
			</tab-component>
			</body>
			</html>

Neue Datei
			@@ -0,0 +1,21 @@
			class TabComponent extends HTMLElement {
			constructor() {
			super();

			this.root = this.attachShadow({mode: "open"});

			this.root.innerHTML = `
			<style>
			/* CSS here */
			</style>

			<!-- HTML here -->
			`;
			}

			connectedCallback() {
			/* Code here */
			}
			}

			window.customElements.define("tab-component", CustomA);

	templates/009-web-components/event-handling.html	20 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	templates/009-web-components/event-handling.js	47 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	templates/009-web-components/tab-component.html	16 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	templates/009-web-components/tab-component.js	21 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie