Shadow DOM breaks event delegate

[rluba]

🐛 Bug Report

Adding a <slot> to any component moves the whole template into the Shadow DOM. This breaks delegate event binding like click.delegate=… because the global event handler can’t see the event from inside the Shadow DOM.

While I did understand the cause after thinking about it for a while (after being puzzled why my click handlers stopped working), I’m quite sure that this side-effect will affect many people unexpectedly. (A good example is that realworld inside this repo has the same bug in its FollowButton.)

🤔 Expected Behavior

Either click.delegate should work inside Shadow DOM or <slot> should not automatically trigger a Shadow DOM.

💁 Possible Solution

One workaround would be to register a delegate event handler inside each Shadow DOM component. But that probably reduces the benefits of having that global handler in the first place.

💻 Code Sample

Component:

export class ShadowButton {
    public onClick() {
        console.log('CLICK');
    }
}

Template:

<button type="button" click.delegate="onClick()">
  <slot></slot>
</button>

🌍 Your Environment

Aurelia 0.4.0-dev.201910020524

[EisenbergEffect]

@bigopon I believe we fixed this in v1 recently. We will need to port that work over to v2. Adding this as an Alpha milestone item.