我开始使用 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>
...
但是当我在浏览器中打开文件时，什么也没有显示。我做错了什么？
最佳答案
将内容标签添加到您的元素，然后为所需的元素/标签添加一些样式。
**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>
希望这有帮助!
关于 polymer - 显示 polymer 元素内部的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27810361/