196457 2019-04-01 12:35:34 -0700 Slot click events not fired after visibility change 2019-04-02 14:31:25 -0700 1 1 1 Unclassified WebKit UI Events Safari 12 Unspecified Unspecified RESOLVED INVALID P2 Normal --- 148695 1 david.dalbusco webkit-unassigned cdumez rniwa oldest_to_newest 1523009 0 david.dalbusco 2019-04-01 12:35:34 -0700 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. 1523172 1 366452 rniwa 2019-04-01 19:15:03 -0700 Created attachment 366452 Example (works) Could you describe which element's visibility is getting changed? For example, click event works fine in the attached example. 1523233 2 david.dalbusco 2019-04-01 22:57:11 -0700 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>  #shadow:root <div>  <button> <slot name="test"/> </button> </div> <my-components> <span slot="test">In both case no click events</span> 1523235 3 rniwa 2019-04-01 23:19:21 -0700 (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>  > #shadow:root > <div>  > <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? 1523238 4 david.dalbusco 2019-04-01 23:52:02 -0700 I'll try later today to reproduce the issue in a dummy project and will provide it 1523265 5 david.dalbusco 2019-04-02 03:50:45 -0700 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 1523476 6 rniwa 2019-04-02 14:31:25 -0700 (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! 366452 2019-04-01 19:15:03 -0700 2019-04-01 19:18:57 -0700 Example (works) shadow-click.html text/html 412 rniwa PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8Ym9keT4KPGRpdiBpZD0iaG9zdCIgc3R5bGU9InZpc2li aWxpdHk6IGhpZGRlbiI+PHNwYW4gc2xvdD0iaGVsbG8iPkg8L3NwYW4+PC9kaXY+CjxidXR0b24g b25jbGljaz0icyA9IGhvc3Quc3R5bGU7IHMudmlzaWJpbGl0eSA9IHMudmlzaWJpbGl0eSA9PSAn aGlkZGVuJyA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nIj5Ub2dnbGU8L2J1dHRvbj4KPHNjcmlwdD4K CmNvbnN0IHNoYWRvd1Jvb3QgPSBob3N0LmF0dGFjaFNoYWRvdyh7bW9kZTogJ2Nsb3NlZCd9KTsK c2hhZG93Um9vdC5pbm5lckhUTUwgPSBgPGJ1dHRvbiBvbmNsaWNrPSJhbGVydCgnY2xpY2tlZCEn KSI+CjxzbG90IG5hbWU9ImhlbGxvIj48L3Nsb3Q+CjwvYnV0dG9uPmA7Cgo8L3NjcmlwdD4KPC9i b2R5Pgo8L2h0bWw+Cg==