import { controller, targets } from "@github/catalyst";

@controller
class ParentComponentElement extends HTMLElement {
    @targets bubbleables!: HTMLElement[];

    // call when you need to dispatch event to child
    private dispatchEventToBubbleables(eventName: BusEvents): void {
        const event = new CustomEvent(eventName);

        this.bubbleables.forEach((element) => element.dispatchEvent(event));
    }
}

import { controller } from "@github/catalyst";

@controller
class ChildrenComponentElement extends HTMLElement {
    connectedCallback(): void {
        this.addEventListener('eventName', this.doSomething);
    }

    private doSomething(): void {
        console.log('event received 🤩🤩🤩');
    }
}