Description
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/[email protected]/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