3 ms·
We've got an issue right now with Ionic components (for React) which are Web Components under the hood. Seems like each component has its own shadow DOM that g
by metadaemon 3y ago
We've got an issue right now with Ionic components (for React) which are Web Components under the hood.
Seems like each component has its own shadow DOM that gets fired up. This would be fine under normal circumstances, but we use a tool called Cohere (now Cardina after the Ramp acquisition) which listens to the DOMContentLoaded [1] event.
Looking at flame graphs, this event, when fired, seems to cause Cohere to traverse the DOM. This becomes very expensive when you are loading something like an Ionic grid, with lots of rows and columns. Unfortunately this Cohere code lives within a dynamic JS module that they load at runtime, which is proprietary, so there isn't a way to submit a PR to change the behavior.
I'd love if someone knew more about that event in the context of the shadow DOM in particular. Perhaps there is a way to limit its invocation through the Web Component API.
[1] - https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event https://developer.mozilla.org/en-US/docs/Web/API/Document/DO...
- Permik 3y agoYou probably can fix this by registering your event handler for the DOMContentLoaded before the dynamic one and just calling stopPropagation() on subsequent events after the main DOMContentLoaded. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation https://developer.mozilla.org/en-US/docs/Web/API/Event/stopP...