Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Easy Way to Grok Insertion Points

Easy Way to Grok Insertion Points

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.