[scoped-custom-element-registry] Missing native events on firefox

JGiard commented 3 months ago

Description

Hello, I was working on a web-component with a

element, and was having issues with my events that I managed to narrow down to importing scoped-custom-element-registry. The bug only happens on firefox and not on chrome.

I have a web-component built using lit v3 that contains a dialog element. As soon as I add an import to scoped-custom-element-registry, all events dispatched inside the dialog element fail to propagate outside of the web-component

Example

Here is a minimal html page to reproduce

<body>
<script type="module">
    import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
    import "https://cdn.jsdelivr.net/npm/@webcomponents/scoped-custom-element-registry@0.0.9/src/scoped-custom-element-registry.js"

    export class MyModal extends LitElement {
        render() {
            return html`
                <button @click=${this.open}>open</button>
                <dialog>
                    <slot></slot>
                </dialog>
            `;
        }

        open() {
            this.shadowRoot.querySelector("dialog").showModal()
        }
    }

    customElements.define('my-modal', MyModal);
</script>
<div id="main">
    <my-modal>
        <button>click here</button>
    </my-modal>
</div>
<script>
    document.querySelector("#main").addEventListener("click", (e) => console.log("click on main", e, e.target))
</script>
</body>

Steps to reproduce

Click on the button to open the dialog, and click again inside. Expected behavior is to have two logs "click on main" in the console, one for each click.

On firefox, the second click event does not propagate upwards ouside of the web-component. Removing the scoped-custom-element-registry import fixes the problem. This affects all events (not only MouseEvents).

Version

Lit-element v3 @webcomponents/scoped-custom-element-registry v0.0.9

Browsers affected

It looks like it only recently stopped working on firefox, a colleague mistakenly had an no-up-to-date firefox v109 and could not reproduce it.

[ ] Chrome
[x] Firefox
[ ] Edge
[ ] Safari
[ ] IE 11

BartJanvanAssen commented 2 months ago

I'm having the same issue, do you have an update?

BartJanvanAssen commented 2 months ago

I was given a workaround via discord, check it out here: https://github.com/webcomponents/polyfills/issues/547#issuecomment-2077323905

webcomponents / polyfills