I'm experiencing difficulties trying to implement a mixin in Polymer. I have created --test-theme, but it seems that the style is not being applied inside the element. Any suggestions on where I might be making a mistake?
story-card.html
<dom-module id="story-card">
<style>
:host {
display: block;
box-sizing: border-box;
}
#story-card {
min-height: 5em;
max-width: 45%;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
#story-card .story-content {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
@apply(--test-theme);
}
#story-card .story-button-container {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
margin-bottom: 1em;
width: 100%;
overflow: auto;
white-space: nowrap;
}
#story-card .story-button-container .fab-button {
float: right;
display: inline-block;
margin-left: 0.5em;
margin-bottom: 0.1em;
--paper-fab-background: rgb(233, 74, 47);
}
</style>
<template>
<paper-material id="story-card" elevation="3">
<div class="story-button-container">
<paper-fab icon="delete" class="fab-button" elevated="2" disabled$="[[signedIn]]" animated></paper-fab>
<paper-fab icon="create" class="fab-button" elevated="2" disabled$="[[signedIn]]" on-click="editClickHandler" animated></paper-fab>
</div>
<span class="story-content" hidden$="[[!editing]]">{{storyContent}}</span>
<paper-textarea label="Edit Card" value="{{storyContent}}" hidden$="[[editing]]"></paper-textarea>
</paper-material>
</template>
</dom-module>
<script>
Polymer({
is: 'story-card',
properties: {
storyContent: {
type: String,
value: ''
},
signedIn: {
type: Boolean,
value: false
}
},
// Element Lifecycle
ready: function() {
this.editing = true;
},
editClickHandler: function () {
this.editing = !this.editing;
}
});
</script>
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../story-card.html">
<style is="custom-style">
story-card {
--test-theme: {
font-family: Verdana;
font-size: 5em;
};
}
</style>
<title>story-card Demo</title>
</head>
<body>
<template is="dom-bind" id="app">
<p>An example of <code><story-card></code>:</p>
<story-card class="story-card" story-content="[[storyContent]]"></story-card>
</template>
<script>
( function ( document ) {
var app = document.querySelector( '#app' );
app.storyContent = "Test content";
})( document );
</script>
</body>
</html>
I anticipated that the text Test Content would appear larger and in verdana, however, it seems to be using the style within the element instead of applying the style in index.html. Any tips on how I can resolve this issue?