Polymer 聚合物-显示聚合物元件内部的元件

我开始玩聚合物，我正在用这种结构构建一个元素：

<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>

但是，当我在浏览器中打开文件时，什么都不显示。我做错了什么？

使用模板中的

标记。这将呈现聚合物元素内部的内容

---

有关内容标签如何工作的更多信息，请参阅

您可以使用标签将您的内容带到标签中

来源：

将内容标签添加到元素中，然后为所需的元素/标签添加一些样式

**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>

**示例**
polyfill下一个选择器{content:'：host>p'}：：content>p{
颜色：黑色；
}
polyfill下一个选择器{content:'：host>*'}：：content>*{
颜色：绿色；
}

---

希望这有帮助

按照您现在的设置方式，电子卡无法显示任何内容。要使模板显示某些内容，只需在其根

标记中编写普通html即可

模板不显示h和p的原因是它不知道如何显示它们。为此，请使用

标记

index.html

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

这是我的名片
Lorem ipsum dolor sit amet，奉献精英

e-card.html

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

。。。
您的
e-card
中似乎没有定义HTML元素？这是正确的，但实际上不需要指定内容类型。如果您只想显示所有内容，那么您只需使用
...
</style>
<template>
    <content select="h1"></content
    <content select="p"></content>
</template>