[ShadyDOM] Events dispatched by Light DOM children in connectedCallback cannot be handled

[tpluscode]

Live Demo

https://stackblitz.com/edit/shady-dom-events?file=index.html

Steps to Reproduce

Create two elements and nest one in the other. Have the child dispatch an event in connectedCallback Have the parent listen for that event

Expected Results

The event should be handled by the parent.

Actual Results

In polyfilled browsers the event coming from connectedCallback is not handled. It's almost like it doesn't exist. It does not trigger the handler and it's not even causing the capture phase.

Events dispatched past connectedCallback are handled as expected.

Workaround

It is enough to make the dispatch async by wrapping in setTimeout(dispatch, 0).

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [x] Edge
• [ ] Safari 9
• [ ] Safari 8
• [x] IE 11

Versions

• webcomponents: v2.2.7

[dfreedm]

Might be a duplicate of #95?

[tpluscode]

That did not occur to me at time of writing but it is possible that it's really the same issue. Here there connectedCallback gets called before the child element has been distributed but Shady DOM so it's comparable to the conditions of #95

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!