Web Development Examples
Parent: b1fe6a28 | Patch | Commit | ignore whitespace
Sascha Schulz
2024-02-19 c08cf6ebc27318aff5f67b015a5d54240bdbf4c3 
add web component styles exercise
2 Dateien hinzugefügt
40 ■■■■■ Geänderte Dateien
templates/009-web-components/web-component-styles.html 16 ●●●●● Patch | Ansicht | Raw | Blame | Historie
templates/009-web-components/web-component-styles.js 24 ●●●●● Patch | Ansicht | Raw | Blame | Historie 
 templates/009-web-components/web-component-styles.html


Neue Datei


@@ -0,0 +1,16 @@


<!DOCTYPE html>



<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>Web Component Styles</title>



        <script defer src="web-component-styles.js"></script>



    </head>



    <body>



        <style>



            /* Outer Styles */



        </style>



        <my-component></my-component>



        <div class="inner">Global Text with inner class</div>



        <div class="outer">Global Text with outer class</div>



    </body>



</html>





 templates/009-web-components/web-component-styles.js


Neue Datei


@@ -0,0 +1,24 @@


class MyComponent extends HTMLElement {



    constructor() {



        super();







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







        shadowRoot.innerHTML = `



            <style>



                :host {



                    display: block;



                }



                


                .inner {



                    /* Inner Styles */



                }



            </style>



            


            <div class="inner">Web Component Text with inner class</div>



            <div class="outer">Web Component Text with outer class</div>    


        `;



    }



}







window.customElements.define("my-component", MyComponent);