Difference between "template" tags, "content" tags and custom element tags in HTML

I am beginning to learn about web components and polymer. I understand that there are mechanisms to separate content from presentation which is important in dynamically presenting content. I also understand that the "content" tag helps do so by selecting what contents (say, those within certain HTML tags or ids or classes, etc.) needs to be presented. But, I feel that the use of template tag is also in separating content from presentation and so is the use of custom element tags while the presentation/rendering is completely taken care of by JavaScript.

But we have 3 different types of tags all doing the same thing: defining content in a more structured way for ease of presentation. Could we combine some of their mechanisms into fewer tags?

It would be great if an explanation could be given, of the roles of template tags, content tags and custom-element tags, in relation to the programming idioms and design patterns followed in Web Engineering.