logo标签列表

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

polymer
3

我现在开始学习 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>
...

但是当我在浏览器中打开文件时，什么都没有显示。我做错了什么？
看起来你的 e-card 中没有定义任何 HTML 元素？ - Justin XL
4个回答
5
将内容标签添加到您的元素中，然后为所需的元素/标签添加一些样式。
**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>

希望这有所帮助！
2

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

请参考文档，了解有关内容标记的工作原理的更多信息。

0

当前的设置方式，没有内容可供电子卡片显示。为了使模板可以显示内容，只需在其根<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>

这有点类似于给函数传递一些参数。在这里，“函数”是e-card，而“参数”则是h1和p。

这是正确的，但你不一定需要指定内容类型。如果你只想显示所有内容，那么你可以使用<content></content>。 - hobberwickey
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接