Polymer - Show an element within a polymer element
I am starting to play with Polymer and I am creating an element with this structure:
<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>
In my index.html
file, I call the element like this:
...
<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>
...
But when I open the file in the browser, nothing is displayed. What have I done wrong?
source to share
Use tags <content> </content>
inside the template. This should make your content inside the polymer element.
Please refer to the documentation to learn more about how content tags work.
source to share
Add content tag to your element, then add style for the desired 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>
Hope this helped!
source to share
You can use tag to add your content to your tag
Source: https://www.polymer-project.org/docs/start/tutorial/step-2.html
source to share
As you set it up right now, there is nothing that can display an electronic map. To get the template to display something, just write normal html inside it as root <template>
.
The reason your template doesn't display h and p is because it doesn't know how to display them. To do this, use a tag <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>
This is somewhat similar to how you can give a function some parameters. Here "function" is an electronic map, and "parameters" are h1 and p.
source to share