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);