Polymer - class doesn't load in template? - css

Question

I have a custom class:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-voltage">
<template is="auto-binding">
<div class="circle">{{volts}}</div>
<div class="circle">{{time}}</div>
<div class="circle">{{temp}}</div>
</template>
<script>
//etc
</script>
</dom-module>
In the shared-styles.html file I have the definition for the circle class:
.circle {
display: inline-block;
width: 64px;
height: 64px;
text-align: center;
color: #555;
border-radius: 50%;
background: #ddd;
font-size: 30px;
line-height: 64px;
}
However, the class doesn't load. I don't get the circle around the text, nor anything else defined there. What am I missing? Can I not use classes in templates? Do I need to import it somehow else?

Answer 1

I'm pretty sure you want something like this:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-voltage">
<template is="auto-binding">
<style include="shared-styles">
/* any extra styles can go here */
</style>
<div class="circle">{{volts}}</div>
<div class="circle">{{time}}</div>
<div class="circle">{{temp}}</div>
</template>
<script>
//etc
</script>
</dom-module>
Note the <style> block.