search

solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://solidjs.com
MIT License
32.24k stars 920 forks source link

Events Fail to Trigger when Rendering Components within a Shadow DOM with 'mode' set to 'closed'. #1891

Open y1j2x34 opened 1 year ago

y1j2x34 commented 1 year ago

Describe the bug

In my example, I've implemented a Counter component that increases the count by 1 and displays the final count every time an onClick event is triggered. Additionally, I've created a Web Component named CustomElement, which can accept a mode parameter to create a Shadow DOM and render the Counter component inside it. However, when I set the mode to 'closed,' the onClick event of the Counter component no longer gets executed. The expected behavior is for the Counter component to increase the count by 1 and display the final count upon each click.

Your Example Website or App

https://playground.solidjs.com/anonymous/184db1e1-13a1-4d59-b685-26f1670ac9e0

Steps to Reproduce the Bug or Issue

...

Expected behavior

I expected that when I set the mode parameter to 'closed' for the Shadow DOM, the Counter component would still function as intended, increasing the count by 1 and displaying the final count whenever the onClick event is triggered.

Screenshots or Videos

No response

Platform

I've tested it on Linux Chrome, but I believe this issue can be reproduced on all platforms.

Additional context

No response

ryansolid commented 1 year ago

I don't believe we can do anything about this. We use event retargetting within the shadow DOM. With "closed" we don't have access to those elements from the outside. Makes it difficult/impossible to do a few things. I won't close this at the moment and leave it as an enhancement, but something pretty major would have to change for us to ever look at this.