Web Development Examples
Parent: 9c04304a | Patch | Commit | ignore whitespace
Sascha Schulz
2024-01-15 1b66d357cecda646009620ce9ba9424a4fa39517 
add hello sayer component excercise
2 Dateien hinzugefügt
28 ■■■■■ Geänderte Dateien
templates/web-components/hello-sayer.html 11 ●●●●● Patch | Ansicht | Raw | Blame | Historie
templates/web-components/hello-sayer.js 17 ●●●●● Patch | Ansicht | Raw | Blame | Historie 
 templates/web-components/hello-sayer.html


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>





 templates/web-components/hello-sayer.js


Neue Datei


@@ -0,0 +1,17 @@


class HelloSayerComponent extends HTMLElement {



    connectedCallback() {



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







        shadowRoot.innerHTML = `



            <style>



                div {



                    background-color: coral;



                    color: white;



                }



            </style>



            <div>Hello!</div>



        `;



    }



}







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