Polymer - Show element inside polymer element

3
votes

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?

4
polymer
Looks like you have no HTML elements defined in your e-card? – Justin XL

4 Answers

5
votes

Add the content tag to your element, then add some styling for the desired element/tag.

**Example**   

<template>
  <style>
    <!-- add styling to the p tag. -->
    polyfill-next-selector { content: ':host > p' }::content > p {
      color: black;
    }
    <!-- add styling to all content. -->
    polyfill-next-selector { content: ':host > *' }::content > * {
      color: green;
    }
  </style>
    <content></content>
</template>

Hope this helped !

2
votes

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.

0
votes

You can use tag to bring your 's content into your tag

Source: https://www.polymer-project.org/docs/start/tutorial/step-2.html

0
votes

The way you have it set up right now, there is nothing for e-card to display. To make the template display something, simply write usual html inside it's root <template> tag.

The reason your template doesn't display h and p is that it doesn't know how to display them. For that, use the <content> tag.

index.html

<e-card>
    <h1>This is my card</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</e-card>

e-card.html

...
</style>
<template>
    <content select="h1"></content
    <content select="p"></content>
</template>

It's somewhat similar to how one would give a function some parameters. Here, the "function" is e-card and the "parameters" would be h1 and p.