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

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

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

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

请参阅the documentation以详细了解内容标记的工作原理。

Answer 3

您可以使用标记将您的内容带入标记

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

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>

这有点类似于为函数提供一些参数的方式。这里，“功能”是电子卡，“参数”是h1和p。

聚合物 - 在聚合物元素内显示元素

4 个答案: