How to remove elements before it render similar to uBlock?

I want to filter out nonsense recommendations from YouTube using channel's name. The idea is if the video isn't from a channel in allowed_channels then delete it.

Currently I'm using something along the line of

allowed_channels = ['Nemean', 'Nintendo'];
window.setInterval(removecraps, 200);
function removecraps(){
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 (!allowed_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?

I looked into the 2 posts in @wOxxOm's comment but as I'm not really familiar with JS I have no idea how to implement them.

from How to remove elements before it render similar to uBlock?