CODEWITHSUNDEEP
htmlcsspolymerpolymer-1.0
Dustin Gulley
Dustin Gulley

Reputation: 123

Having trouble applying a mixin in Polymer

I'm having problems getting a mixin to work in polymer. I've created --test-theme but it's not applying the style inside the element. Any ideas where I'm going wrong?

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>&lt;story-card&gt;</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 would expect the text Test Content that is displayed to be larger and in verdana but it is using the style within the element and not applying the style in index.html. Does anybody knows how I can do this?

Upvotes: 2

Views: 1593

Answers (1)

Scott Miles
Scott Miles

Reputation: 11027

--test-theme {

is a property assignment, and has to be like so (added colon):

--test-theme: {

I'm not 100% sure why at this point, but simplifying:

#story-card .story-content { ...

to

.story-content { ...

fixes it when I run your test.

http://jsbin.com/zozute/edit?html,output

I'll follow up when I can explain this root cause.

Upvotes: 3

Related Questions