custom/shadowDOM/template contents

by Ercan Cicek

HTML

<my-element></my-element>



<br /><br /><br /><br />



<shadow-element></shadow-element>



<br /><br /><br /><br />



<template-element></template-element>
<template id="my-template">
    <style>
        .template-content {
            font-weight: bold;
        }
    </style>
    <p class="template-content">Ditte ist template content</p>
</template>

JavaScript

// ------ WEB COMPONENTS
/*
  Custom Elements: 	Erstellen von benutzerdefinierten HTML-Elementen
  Shadow DOM: 			Schafft einen isolierten Baum für die Elemente
  HTML Templates: 	Definieren von wiederverwendbaren Vorlagen
  ES Modules: 			Strukturieren und Importieren von JavaScript-Code (optional für komplexere Projekte)
*/










// Custom Element
class MyElement extends HTMLElement {
    constructor() {
        super(); // Ruft den Konstruktor der Basisklasse auf
        this.innerHTML = "<p>Ditte ist ein custom element</p>";
    }
}

customElements.define('my-element', MyElement);


















// ShadowDOM
class ShadowElement extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = `
            <style>
                :host {
                    display: block;
                    color: white;
                    background-color: black;
                    padding: 20px;
                }
            </style>
            <p>Ditte ist ShadowDOM content</p>
        `;
    }
}

customElements.define('shadow-element', ShadowElement);

















// HTML Template
class TemplateElement extends HTMLElement {
    constructor() {
        super();
        const template = document.getElementById('my-template').content;
        this.appendChild(template.cloneNode(true));
    }
}

customElements.define('template-element', TemplateElement);

















s