我开始玩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>
希望这有帮助!