add examples for event handling in web components

Sascha Schulz

2024-03-18 2c684af29f61555fce48e67993a865e4ba091698

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
40
41
42
43
44
45
46
47
class CustomA extends HTMLElement { 
    constructor() { 
        super(); 
 
        this.root = this.attachShadow({mode: "open"}); 
 
        this.root.innerHTML = ` 
            <button>Click Me!</button>     
        `; 
    } 
 
    connectedCallback() { 
        const button = this.root.querySelector("button"); 
 
        button.addEventListener("click", () =>{ 
            const event = new CustomEvent("customevent", { bubbles: true, composed: true}); 
 
            button.dispatchEvent(event); 
        }); 
    } 
} 
 
window.customElements.define("custom-a", CustomA); 
 
class CustomB extends HTMLElement { 
    constructor() { 
        super(); 
 
        this.root = this.attachShadow({mode: "open"}); 
 
        this.root.innerHTML = ` 
            <button>Click Me!</button>     
        `; 
    } 
 
    connectedCallback() { 
        const button = this.root.querySelector("button"); 
 
        button.addEventListener("click", () =>{ 
            const event = new CustomEvent("customevent", { bubbles: true}); 
 
            button.dispatchEvent(event); 
        }); 
    } 
} 
 
window.customElements.define("custom-b", CustomB);