Using multiple Id attributes in a single HTML page ‘makes the page invalid’. However when it gets to styling components with stylesheets (not inline) it seems to be the only way to specifically style each component.
From your experience, how bad it might be if a webpage may have for example 20 divs with the same id attribute?
Why not use class instead of id? Class is specifically designed to style multiple elements, and you can have as many as you want on one page.
Because of Specificy Wars 
I am using Semantic UI and as you can imagine from this example
<div class='ui vertical borderless menu component-menu'></div>
…the ‘.ui.vertical.borderless’ multiple classes will overwrite my .component-menu class.
Whereas this:
<div id='component-menu' class='ui vertical borderless menu'></div>
…will make sure that whatever classes combination there are, I always can easily style with CSS or any preprocessor each component/template independently.
Yeah but that sounds like a different problem. The answer to your original question is definitely that you should not use IDs.
Perhaps this is a good case for !important.
Yes, it might be specific semantic issue from one hand, from another if I want to specifically style a component (using stylesheets, not inline) I want to have a reliable anchor.
The !important won’t work if .ui.vertical.borderless.menu has also !important somewhere… :-/