Sascha Schulz
vor 4 Tagen c98907289eb9db87a5bea37f2e2c39d6d1f59ce5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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);