Closed
Description
Which package(s) are affected?
Lit Core (lit / lit-html / lit-element / reactive-element)
Description
When using the inert attributes on the host like so:
<my-custom-el inert></my-custom-el>I am expecting all click events to be prevented. But it looks like it is not the case only with Safari
Reproduction
@customElement("my-custom-el")
export class InertIssue extends LitElement {
connectedCallback(): void {
super.connectedCallback();
this.addEventListener("click", () => alert("KO"));
}
render() {
return html`CLICK ME`;
}
}Workaround
- Using an
inerton a parent element works:
<div inert>
<my-custom-el></my-custom-el>
</div>- Or using a condition on
this.hasAttribute('inert')in the event callback
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
Failing in 2.7.6, 2.8.0
Browser/OS/Node environment
Browser: Safari Version 18.4 (20621.1.15.11.10)
MacOs: 15.4.1
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status
✅ Done