Polymer

Question

我开始玩 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>

在我的 index.html 文件中，我这样调用元素：

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

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

Answer 1

使用模板内的 <content> </content> 标签。这应该将您的内容呈现在聚合物元素内。

请参阅 the documentation 以了解有关内容标签如何工作的更多信息。

Answer 2

您可以使用标签将您的内容放入您的标签中

来源：https://www.polymer-project.org/docs/start/tutorial/step-2.html

Answer 3

将 content 标记添加到您的元素，然后为所需的 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>

希望对您有所帮助！

Answer 4

按照您现在的设置方式，没有任何电子贺卡可以显示。要使模板显示某些内容，只需在其根 <template> 标记内写入通常的 html 即可。

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

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>

这有点类似于给函数一些参数的方式。这里，"function" 是电子名片，"parameters" 是 h1 和 p.

Polymer - 显示聚合物元素内的元素

Polymer - Show element inside polymer element