在聚合物中应用mixin时遇到困难

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

故事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要更大一些，并宋体，但它是使用元素中的样式并且不应用index.html中的样式。有谁知道我能做到这一点吗？

来源

2015-06-18 Dustin Gulley

--test-theme {

是财产分配，且必须像这样（加冒号）：

--test-theme: {

我不是100％肯定，为什么在这一点上，但简化：

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

到

.story-content { ...

修复它，当我运行你的测试。

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

我会跟进，如果我能解释这个根源。

来源

2015-06-19 09:25:37

好抓！不幸的是，这并没有让它工作。 –

我又增加了一个建议。 –

这样做，谢谢Scott！实际上，我遇到了一些与此相同问题的元素，因此有一个解决方案会很好。希望我也知道是什么原因造成的。 –

在聚合物中应用mixin时遇到困难

回答

相关问题