We are currently evaluating the use of the Syncfusion Schedule React component embedded within a web component application. The schedule will be displayed as a tab inside the web component app, with the React app wrapped as a web component.
During integration, we have encountered several issues related to the component being nested multiple levels deep within the Shadow DOM:
• Some issues are straightforward to resolve, such as updating CSS variables to work with the :host selector. We would like this handled automatically in the provided styles though
• However, we are experiencing problems with various popovers not functioning correctly.
• Specifically, clicking the calendar's left and right navigation buttons causes the popover to close unless we stop event propagation.
• Additionally, clicking "Edit" or "More details" causes the appointment details popover to close instead of opening the intended modal.
• We have also identified challenges with event listeners attached to the document body, which do not behave correctly within the Shadow DOM context.
Given these challenges, we would like to know if there are any plans to enhance support for web components and Shadow DOM in the Syncfusion Schedule React component.
