Suppose you're writing a Polymer app. It's a grocery list app to rule all grocery list apps. In it, you have this <grocery-completion> component:
used as:
<grocery-completion data="{{groceries}}"></grocery-completion>
defined as:
<link rel="import" href="../elements/grocery-ingredient-chooser.html">
<polymer-element name="grocery-completion">
<template>
...
<grocery-ingredient-chooser></grocery-ingredient-chooser>
...
</template>
...
</polymer-element>After you built this component, you suddenly realize that things other than ingredients could use the auto-complete action. At this point, you start wondering: "Gee, I could use a level of indirection here". Instead of explicitly including the <grocery-ingredient-chooser>, you want there to be some placeholder for stuff that's late-bound. Like a pointer for DOM.
Enter the <content> element:
used as:
<link rel="import" href="../elements/grocery-ingredient-chooser.html">
<grocery-completion data="{{groceries}}">
<grocery-ingredient-chooser></grocery-ingredient-chooser>
</grocery-completion>
defined as:
<polymer-element name="grocery-completion">
<template>
...
<content></content>
...
</template>
...
</polymer-element>Note how the decision on what element to use in place of <content> is now deferred to the user of the <grocery-completion>. Also note that <grocery-completion> no longer depends on <grocery-ingredient-chooser>.
So there it is, a simple way to understand <content>. It's just a level of indirection.