Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 of 5 tasks
JGiard opened this issue Apr 2, 2024 · 2 comments
Open
1 of 5 tasks

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

JGiard opened this issue Apr 2, 2024 · 2 comments
Labels
Focus Area: Standards & Polyfills Type: Bug

Comments

@JGiard
Copy link

JGiard commented Apr 2, 2024 •
edited

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
  • Firefox
  • Edge
  • Safari
  • IE 11
@BartJanvanAssen
Copy link

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

@BartJanvanAssen
Copy link

I was given a workaround via discord, check it out here: #547 (comment)

@sorvell sorvell mentioned this issue May 6, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Focus Area: Standards & Polyfills Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JGiard @BartJanvanAssen