Html 在聚合物中使用混合剂有困难

我很难让混合器在聚合物中工作。我创建了--测试主题，但它没有在元素中应用样式。知道我哪里出错了吗

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>

我希望文本

测试内容

显示得更大，并且在verdana中，但它使用元素中的样式，而不是应用

index.html中的样式。有人知道我怎么做吗？
--测试主题{

是一个属性赋值，必须与此类似（添加冒号）：

--测试主题：{

我不能100%确定这一点的原因，但简化了：

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

到

当我运行你的测试时修复它


当我能解释这个根本原因时，我会继续跟进。
很好的回答！不幸的是，这没有让它起作用。我添加了另一个建议。这样做了，谢谢Scott！我实际上有一些元素与这个问题有关，所以有一个解决方案会很好。希望我也知道是什么导致了它。
#story-card .story-content { ...

.story-content { ...