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.