Repository: angular
Issue: Allow dispatch of bubbling custom events when using `@angular/elements`
Labels: feature,area: elements,feature: under consideration

# 🚀 feature request

### Relevant Package

This feature request is for `@angular/elements`.

### Description

When using `@angular/elements`, outputs are converted to `CustomEvents`:
https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/create-custom-element.ts#L225-L228

There is no way of listening to the custom events from a grand parent element or component because these custom events don't bubble as the `bubbles` option is set to `false` here:

https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/utils.ts#L55-L70

It would be nice to figure out a way of listening to custom events in grand parent elements.

### Use Case
The app loads dynamic markdown content. This markdown is processed with a third party library like [Marked](https://github.com/markedjs/marked) where we add a special link handler that replaces links with our custom elements (using Angular Elements). These elements trigger custom events that we want to handle in the parent component (the one that loaded the markdown).

The general idea is that we can let a 3rd party (non-Angular) library control the DOM and inject our Angular Elements but we want to keep communicating with these elements without having to dispatch bubbling events manually or using an indirection like a provider or state management etc...

### Solutions

#### Solution A

1. Create a new `CustomEventEmitter` where we can configure `bubbles` and `cancelable`: 
```ts
new CustomEventEmitter({bubbles: true, cancelable: false})
```
_We can't use `EventEmitter` because `bubbles` and `cancelable` will be simply ignored and confusing when not using Angular elements_

2. Change `ComponentNgElementStrategy` in order to handle `CustomEventEmitter` differently instead of merging all emitters:
https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/component-factory-strategy.ts#L50

3. Change `createCustomElement` in order to handle `bubbles` and `cancelable`:
https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/create-custom-element.ts#L225-L228

4. Change `createCustomEvent` to allow the control of `bubbles` and `cancelable`:
https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/utils.ts#L55-L70

5. [OPTIONAL] Should we deprecate `EventEmitter` usage with Angular elements? Allowing both can be confusing.

#### Solution B

Create a new `CustomEventEmitter` which is an `EventEmitter` of type `EventEmitter<{bubbles?: boolean, cancelable?: boolean, detail?: T}>` so every event can have a different bubbling strategy... but that would be a surprising behavior so I am not a big fan of this one.

#### Contribution
I'll be more than happy to contribute with a PR if the solution is suitable.

### Workaround
Trigger the event manually:
```ts
elementRef.nativeElement.dispatchEvent('myCustomEvent', {bubbles: true, detail: 'data'})
```

### Somewhat related issues
https://github.com/angular/angular/issues/2296