In just a few short years Web Components have gone from "be all end all web development" to "yeah, enhance some HTML maybe".
That said, this is actually closer to the actual original idea of web components [1] than the "react is bad frameworks are bad use the platform" chorus of recent years [2].
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.
You 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.
That said, this is actually closer to the actual original idea of web components [1] than the "react is bad frameworks are bad use the platform" chorus of recent years [2].
[1] See this original talk (and transcript) by Alex Russel sometime in 2011: https://fronteers.nl/congres/2011/sessions/web-components-an...
[2] Which is ironic because web components are extremely bad at using the platform themselves https://threadreaderapp.com/thread/1717580502280867847