public/web-development/presentation.git

			@@ -3554,10 +3554,12 @@
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers="1-15\|17">
			<code class="js" data-trim data-line-numbers="1-16\|19">
			<script type="text/template">
			class HelloWorldComponent extends HTMLElement {
			connectedCallback() {
			constructor() {
			super();

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

			shadowRoot.innerHTML = `
			@@ -3581,6 +3583,29 @@
			<iframe data-src="/assets/html/hello-world.html"></iframe>
			</section>
			<section>
			<h4>Light DOM vs Shadow DOM</h4>
			<img data-src="/assets/images/web-components-shadow-root.png" width="500px">
			</section>
			<section>
			<h4>Suche von Elementen im Light- und Shadow DOM</h4>
			<pre>
			<code class="js" data-trim data-line-numbers>
			<script type="text/template">
			// Light DOM
			const span = document.querySelector("span"); // Hi!
			const divs = document.querySelectorAll("div");

			console.log(divs.length); // => 1

			// Shadow DOM
			const helloWorld = document.querySelector("hello-world");

			helloWorld.shadowRoot.querySelector("div"); // Hello World!
			</script>
			</code>
			</pre>
			</section>
			<section>
			<h3>Auf Attribute reagieren</h3>
			<pre>
			<code class="js" data-trim data-line-numbers="2\|8-10">
			@@ -3588,7 +3613,7 @@
			class HelloWorldComponent extends HTMLElement {
			static observedAttributes = ["my-attribute"];

			connectedCallback() {
			constructor() {
			// ...
			}

			@@ -3605,6 +3630,48 @@
			<p>Lasse die eigene Komponente "hello-sayer" auf eine Änderung des "name"-Attributs reagieren, indem der dort eingetragene Name in der Komponente angezeigt wird (Beispiel: name="Joe" => Hello Joe!)</p>
			<p>(/examples/templates/web-components/hello-sayer.html)</p>
			</section>
			<section>
			<h3>Musterlösung</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			<script type="text/template">
			class HelloSayerComponent extends HTMLElement {
			static observedAttributes = ["name"];

			constructor() {
			super();

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

			this.root.innerHTML = `
			<style>
			div {
			background-color: coral;
			color: white;
			}
			</style>
			<div>Hello!</div>
			`;
			}

			attributeChangedCallback(name, oldValue, newValue) {
			this.root.querySelector("div").innerHTML = `Hello ${newValue}!`;
			}
			}

			window.customElements.define("hello-sayer", HelloSayerComponent);

			const names = ["Joe", "Allie"];
			let counter = 0;

			setInterval(() => document.querySelector("hello-sayer").setAttribute("name", names[counter++ % 2]), 2000);
			</script>
			</code>
			</pre>
			</section>
			<section>
			<iframe data-src="/assets/html/hello-sayer.html"></iframe>
			</section>
			</section>
			</div>
			</div>

	assets/html/hello-sayer.html	11 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/html/hello-sayer.js	30 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/web-components-shadow-root.png	Patch \| Ansicht \| Raw \| Blame \| Historie
	index.html	73 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie

Neue Datei
			@@ -0,0 +1,11 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Web Components</title>
			<script defer src="hello-sayer.js"></script>
			</head>
			<body>
			<hello-sayer></hello-sayer>
			</body>
			</html>

Neue Datei
			@@ -0,0 +1,30 @@
			class HelloSayerComponent extends HTMLElement {
			static observedAttributes = ["name"];

			constructor() {
			super();

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

			this.root.innerHTML = `
			<style>
			div {
			background-color: coral;
			color: white;
			}
			</style>
			<div>Hello!</div>
			`;
			}

			attributeChangedCallback(name, oldValue, newValue) {
			this.root.querySelector("div").innerHTML = `Hello ${newValue}!`;
			}
			}

			window.customElements.define("hello-sayer", HelloSayerComponent);

			const names = ["Joe", "Allie"];
			let counter = 0;

			setInterval(() => document.querySelector("hello-sayer").setAttribute("name", names[counter++ % 2]), 2000);