How to remove elements before it render similar to uBlock?

Question

I want to filter out nonsense recommendation from YouTube using channel's name.

Currently I use something along the line of

grids = document.getElementsByTagName("ytm-rich-item-renderer");
grid_inner = grid.innerText.split('\n');
grid_inner_info = grid_inner[grid_inner.length - 1].split("•");
channel = grid_inner_info[0];
for (var i = 0; i < grids.length; i++) { 
    grid = grids[i];
    if (!channels.includes(channel)) grid.remove();
}

However the recommended videos showed up first then got removed, which interrupt scrolling in the mobile (Firefox Nightly).

If I want to remove videos based on the title instead, I can do this in uBlock

youtube.com##ytd-rich-item-renderer:has-text(/Man Utd/)

And these things will never show up in the first place.

My question is, how does uBlock remove elements before it render?