我在让 mixin 在 polymer 中工作时遇到问题。我已经创建了 --test-theme 但它没有在元素内应用样式。有什么想法我哪里出错了吗？
故事卡.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>
我希望显示的文本测试内容更大并以verdana显示，但它使用元素内的样式，而不是应用index.html中的样式>。有人知道我该怎么做吗？
最佳答案
--测试主题{
是一个属性赋值，并且必须像这样(添加冒号):
--测试主题:{
目前我还不能 100% 确定原因，但可以简化一下:
#story-card .story-content { ...
至
.story-content { ...
当我运行你的测试时修复它。
http://jsbin.com/zozute/edit?html,output
当我能解释这个根本原因时，我会跟进。
关于html - 在 Polymer 中应用 mixin 时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30921422/