Tab Container Element Render on Tab Change

I'm running into issue where it seems as if when I first click a tab of a Tab Container to show its contents, the DOM doesn't immediately "detect" the elements of the newly rendered content. Here are 4 screenshots where I navigate back and forth between tabs in order.

So I'm using the Markdown component to inject and run some JS code whenever the 'Checks' tab's content loads. This is done by writing an img element in the Markdown's source text and giving this img element an onload script, all as HTML. The key part of the JS code is running a document.querySelectorAll to find table rows. I'm also using the JS code for console.log()'s.

When I first navigate to the 'Checks' tab in image #2, the querySelectorAll does not appear to find the 3 table rows shown.

However when I navigate to any other tab and then back to the 'Checks' tab in image #4, the querySelectorAll now finds the 3 table rows (23 vs. 20).

So I imagine there's some kind of race condition happening where the contents of a tab are not immediately rendering for the querySelectorAll to be able to find certain elements. Is there any way around this?

There's obviously a race condition here. The obvious answer is to move your JS later in the sequence, but that's obviously easier said than done. Are you making use of the runWhileHidden property for the Tabs? I wonder if you get different results based on the state of that property.

I tried that, didn't work unfortunately.