Question

我在使用mixin在聚合物中工作时遇到了问题。我创建了--test-theme，但它没有在元素中应用样式。我出错的任何想法？

故事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>

我希望显示的文本Test Content更大并且在verdana中，但它使用元素中的样式而不是在index.html中应用样式。有人知道我怎么做吗？

Answer 1

--test-theme {

是属性赋值，必须如此（添加冒号）：

--test-theme: {

我不是百分之百确定为什么在这一点上，而是简化：

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

到

.story-content { ...

在我运行测试时修复它。

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

当我能解释这个根本原因时，我会跟进。

在Polymer中使用mixin时遇到问题

1 个答案: