Multiple insertion points in polymer module?

Question

In polymer, we can create insertion points for HTML content with <content> within custom modules like this.

<my-custom-element>
  Surrounding HTML ...
  <content></content>
  Surrounding HTML ...
</my-custom-element>

and then later use the module like this:

<my-custom-element>foo content</my-custom-element>

Can a custom element support multiple of these <content>-based insertion points? And how?

Answer 1

You can use standard selection of elements from <template> using the <content>'s select attribute with a CSS selector to get different inserted elements.

<template>
  Name : <content select="h2"></content><br>
  Mail : <content select="#mail"></content>
</tempalte>

<my-custom-element>
    <h2>Some One</h2>
    <span id="mail">[email protected]</span>
</my-custom-element>