I've been struggling for hours to style a Polymer element. Despite following various guides and tutorials, nothing seems to be working.
Here is the code snippet: http://codepen.io/nanobird_/pen/pEWWqW/
Below is my DOM module code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.6/polymer.min.js"></script>
<dom-module id="kink">
<template strip-whitespace>
<style>
:host {
display: inline-flex;
border: 1px solid black;
z-index: 0;
line-height: 1;
height: 40px;
width: 16em;
margin: 2px 8px;
}
#kink-color {
width: 4px;
background-color: aquamarine;
}
#kink-text {
background-color: green;
margin-left: 4px;
text-overflow: ellipsis;
}
</style>
<div id="kink-color"></div>
<div id="kink-text"><content></content></div>
</template>
<script>
Polymer({
is: 'kink',
properties: {
pref: String
}
});
</script>
</dom-module>
<kink pref="yes">Kink</kink>
The desired custom element should resemble the div group right below it - a box with a color swatch on the left side.
I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated!