How to correctly display category’s slug as a class?

The filter is used wrong. For the filter the_category the correct parameters are “list”, “seperator” & “parents”, not “post id”

Next add_filter has 4th parameter which tells wordpress the number of arguments the function will accept, defaulting to 1. So in your case $post_id will always be false. Then get_the_category returns the categories of the current post in the loop (which must be editorial acc. to your HTML)

After that, your logic is also wrong. You are replacing rel=" with the classes of each category one by one. Each link contains this string so each link finally gets each categories class. Assuming there are 3 mentioned categories going in the foreach, the final HTML becomes

<ul class="post-categories">
    <li><a href="http://localhost/test_blog/topics/editorial" title="View all posts in Editorial" class="category-editorial" class="category-business" class="category-national" rel="category tag">Editorial</a></li>
    <li><a href="http://localhost/test_blog/topics/economy/business" title="View all posts in Business" class="category-editorial" class="category-business" class="category-national" rel="category tag">Business</a></li>
    <li><a href="http://localhost/test_blog/topics/economy/national" title="View all posts in National" class="category-editorial" class="category-business" class="category-national" rel="category tag">National</a></li>
</ul>

As you can see each element now has 3 class attributes. Which of them is the browser supposed to consider?

I don’t understand why you’re complexing the things up so much when you can just use get_the_category inside category.php directly & then construct the html yourself