Web Development Examples
Parent: c08cf6eb | Patch | Commit | show whitespace
Sascha Schulz
2024-02-19 62ae95c43c7ab46ecf8f24342ae937fa82095194 
add examples for exportparts and slotted children
4 Dateien hinzugefügt
93 ■■■■■ Geänderte Dateien
templates/009-web-components/exportparts.html 20 ●●●●● Patch | Ansicht | Raw | Blame | Historie
templates/009-web-components/exportparts.js 39 ●●●●● Patch | Ansicht | Raw | Blame | Historie
templates/009-web-components/slotted.html 13 ●●●●● Patch | Ansicht | Raw | Blame | Historie
templates/009-web-components/slotted.js 21 ●●●●● Patch | Ansicht | Raw | Blame | Historie 
 templates/009-web-components/exportparts.html


Neue Datei


@@ -0,0 +1,20 @@


<!DOCTYPE html>



<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>exportparts</title>



        <script defer src="exportparts.js"></script>



    </head>



    <body>



        <style>



            outer-component::part(/* insert part */) {



                color: red;



            }







            outer-component::part(/* insert part */) {



                color: blue;



            }



        </style>



        <outer-component></outer-component>



    </body>



</html>





 templates/009-web-components/exportparts.js


Neue Datei


@@ -0,0 +1,39 @@


class InnerComponent extends HTMLElement {



    constructor() {



        super();







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







        shadowRoot.innerHTML = `



            <style>



                :host {



                    display: inline;



                }



            </style>



            


            <div>Inner Text</div>



        `;



    }



}







class OuterComponent extends HTMLElement {



    constructor() {



        super();







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







        shadowRoot.innerHTML = `



            <style>



                :host {



                    display: inline;



                }



            </style>



            


            <div>Outer Text</div>



            <inner-component></inner-component>



        `;



    }



}







window.customElements.define("inner-component", InnerComponent);



window.customElements.define("outer-component", OuterComponent);





 templates/009-web-components/slotted.html


Neue Datei


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


<!DOCTYPE html>



<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>Slotted Children</title>



        <script defer src="slotted.js"></script>



    </head>



    <body>



        <slot-styler>



            <!-- Slotted children -->



        </slot-styler>



    </body>



</html>





 templates/009-web-components/slotted.js


Neue Datei


@@ -0,0 +1,21 @@


class SlotStyler extends HTMLElement {



    constructor() {



        super();







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







        shadowRoot.innerHTML = `



            <style>



                :host {



                    display: block;



                }



                


                /* Slotted Styles here */



            </style>



            


            <slot></slot>



        `;



    }



}







window.customElements.define("slot-styler", SlotStyler);