Steps to reproduce

Here is a demo: https://stackblitz.com/edit/yua3glfx?file=index.html

Classic React -> Button clickable and onClick event triggered
Web Component with shadow dom -> Button clickable but onClick event not triggered
Web Component without shadow dom -> Button clickable and onClick event triggered

Current behavior

When we want to create a web component in our Library that uses a e.g. LineChart then it breaks every click event ... Buttons, Tabs etc. dont trigger an onClick anymore.

This happens only when we use shadow dom -> But for us it is essential to use shadow dom because of proper isolation.

All webcomponents in the same lib working as expected when they not using charts

Expected behavior

onClick Event and maybe some other Events triggered as expected also when using e.g. LineChart in a web component that uses shadow dom

Context

At this time we have some old legacy cms systems ... When we need some complex components we create some web components and then we use it on this cms websites ... In this example we need to show the customer some price charts from the last months ... And because there are many global css rules that we can´t change at this time we need to isolate the webcomponts from the site otherwise everything breaks

Your environment

System:
OS: Linux 5.0 undefined
Binaries:
Node: 20.19.1 - /usr/local/bin/node
npm: 10.8.2 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: latest => 11.14.0
@emotion/styled: latest => 11.14.1
@mui/core-downloads-tracker: 7.2.0
@mui/material: latest => 7.2.0
@mui/private-theming: 7.2.0
@mui/styled-engine: 7.2.0
@mui/system: 7.2.0
@mui/types: 7.4.4
@mui/utils: 7.2.0
@mui/x-charts: latest => 8.8.0
@mui/x-charts-vendor: 8.5.3
@mui/x-internal-gestures: 0.2.1
@mui/x-internals: 8.8.0
@types/react: latest => 19.1.8
react: latest => 19.1.0
react-dom: latest => 19.1.0
typescript: latest => 5.8.3

Search keywords: charts click-event shadow-dom