I've got a shadowed Web Components which exposes a slot. The visibility of the components' elements change from 'hidden' per default to 'visible' when I call a method. After the visitility (css `visibility: hidden/visible`) as changed, the click event on the button which exposes a slot isn't triggered anymore. ``` <button onClick={() => {this.toggleLink()}}> <span>H</span> </button> ``` => click event ok even after visibility change ``` <button onClick={() => {this.toggleLink()}}> <slot name="hello"></slot> </button> <span slot="hello">H</span> ``` => no click event after the visibility change Double checked, same code work in both Firefox and Chrome.
Created attachment 366452 [details] Example (works) Could you describe which element's visibility is getting changed? For example, click event works fine in the attached example.
Hi, thx for the feedback. Your example could work has it is not a shadowed (shadow DOM) components. The problem occurs in a Web Component respectively in a shadowed DOM components. If you modify the :host visibility or the first container visibility, in both case then the click event isn't triggered anymore if you click on the SLOTTED elements <my-components> <!-- If you change visibility on the host --> #shadow:root <div> <!-- Or if you change visibility on the first container --> <button> <slot name="test"/> </button> </div> <my-components> <span slot="test">In both case no click events</span>
(In reply to David from comment #2) > Hi, thx for the feedback. Your example could work has it is not a shadowed > (shadow DOM) components. ?? The attached example totally uses shadow tree. > The problem occurs in a Web Component respectively in a shadowed DOM > components. > > If you modify the :host visibility or the first container visibility, in > both case then the click event isn't triggered anymore if you click on the > SLOTTED elements > > <my-components> <!-- If you change visibility on the host --> > #shadow:root > <div> <!-- Or if you change visibility on the first container --> > <button> > <slot name="test"/> > </button> > </div> > <my-components> > > > <span slot="test">In both case no click events</span> Okay, the following example seems to work just fine: <!DOCTYPE html> <html> <body> <div id="host" style="visibility: hidden"><span slot="hello">H</span></div> <button onclick="s = container.style; s.visibility = s.visibility == 'hidden' ? 'visible' : 'hidden'">Toggle</button> <script> const shadowRoot = host.attachShadow({mode: 'closed'}); shadowRoot.innerHTML = ` <div id="container"> <button onclick="alert('clicked!')"> <slot name="hello"></slot> </button> </div>`; window.container = shadowRoot.getElementById('container'); </script> </body> </html> Could you just give us a complete HTML file which reproduces this issue?
I'll try later today to reproduce the issue in a dummy project and will provide it
Yes you are right this issue could be closed, it isn't a valid issue Actually the problem of my component is probably another webkit related issue with the selection Therefore this one could be close
(In reply to David from comment #5) > Yes you are right this issue could be closed, it isn't a valid issue > > Actually the problem of my component is probably another webkit related > issue with the selection > > Therefore this one could be close Great. Thanks for checking!