Polymer - Show element inside polymer element

I'm begin play with Polymer and I am building an element with this structure:

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="e-card" attributes="background" contructor="eCard" noscript>

  <template>

    <style>

      h1
      {
        color: #123;
        font-size: 3em;
        text-align: center;
      }

      p
      {
        color: #333;
      }

    </style>
  </template>
</polymer-element>

In my index.html file I call the element like this:

...
<head>
  <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="elements/e-card.html">
</head>
<body>
  <e-card>
    <h1>This is my card</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </e-card>
</body>
...

But when I open the file in the browser nothing is show. What did I do wrong?

Solution

Use the <content> </content> tags inside the template. This should render your contents inside the polymer element.

Please refer to the documentation to learn more about how the content tags work.