Theme component containing a web component that modifies the post's URL anchor freezes the browser

Hey folks,

I stole the nice mermaid theme component and modified it to include RapiDoc as a web component. It allows for rendering OpenAPI specs.

When clicking an operation in the web component, it sometimes freezes up the browser and I have a hard time figuring out what’s happening.
Only closing the tab helps. This does not happen with the same RapiDoc version and the same OpenAPI spec when embedded in other pages.

What it does is that it adds the operation’s id as an anchor to the URL,e.g. _https://my-site/t/my-topic/150#post-/clusters/-clusterID-/gateway. I guess there’s something listening to URL changes that fails in this case, maybe b/c the web component is not yet fully rendered and/or the ID cannot be found in the shadow DOM.

I saw the following on the console:

Promise Rejection: SyntaxError: '#main #put-/clusters/-clusterID-/appliances/-applianceID-/constraints, a[name=put-/clusters/-clusterID-/appliances/-applianceID-/constraints]' is not a valid selector.

The inserted element carrying the ID corresponding to the anchor in the URL looks like this.

<section 
  part="section-endpoint" 
  id="patch-/clusters/-clusterID-" 
  class="m-endpoint regular-font patch collapsed">

Does anyone have any pointers for me to get to the core of the issue?

Thanks a ton!

Answering my own question: Seems it had nothing to do with Discourse after all.
A certain combination of params sent the web component into an scheduleUpdate loop.
Sorry for the noise.

For reference, here’s what I did:

  • Used a non-minified version of rapidoc in the theme component
  • Used the debugger while the site was stuck
  • Looked at the call-stack & found the culprit triggering repeated updates (show-curl-before-try)
  • Changed rapidoc’s params not to trigger this scenario anymore

If you feel this topic doesn’t add to the discussion/is irrelevant, feel free to remove.

Thanks anyway and sorry for the noise again

2 Likes