Web Development Examples
Parent: 1109dda9 | Patch | Commit | ignore whitespace
Sascha Schulz
2024-02-05 745a63103409e57f6371273f612839ef987552ae 
add card component exercise
2 Dateien hinzugefügt
28 ■■■■■ Geänderte Dateien
templates/web-components/card-component.html 13 ●●●●● Patch | Ansicht | Raw | Blame | Historie
templates/web-components/card-component.js 15 ●●●●● Patch | Ansicht | Raw | Blame | Historie 
 templates/web-components/card-component.html


Neue Datei


@@ -0,0 +1,13 @@


<!DOCTYPE html>



<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>Card Component</title>



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



    </head>



    <body>



        <card-component>



            <!-- title and content-->



        </card-component>



    </body>



</html>





 templates/web-components/card-component.js


Neue Datei


@@ -0,0 +1,15 @@


class CardComponent extends HTMLElement {



    constructor() {



        super();







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







        shadowRoot.innerHTML = `



            <!-- style -->



            


            <!-- html -->    


        `;



    }



}







window.customElements.define("card-component", CardComponent);