[英]Polymer styling :host[attribute] failed
得到了带有faded
属性的简单组件。
<template>
<style>
:host {
display: block;
height: 7em;
background: white;
border: 1px solid var(--paper-blue-grey-50);
width: 100%;
margin: 0.1em 0;
}
:host ([faded]) {
display: none;
background: #eaeaea;
color: #a8a8a8;
cursor: auto;
pointer-events: none;
}
.month {
...
}
.names {
...
}
.date {
...
}
</style>
<div>
<div class="month" hidden="[[hideMonth]]">[[details.month]]</div>
<div class="names">
<span class="date">[[details.date]]</span>
<div hidden="[[hideName]]">
<div>[[details.name]]</div>
<div class="highlight annotation"></div>
</div>
</div>
</div>
</template>
<script>
'use strict';
Polymer({
is: "calendar-day-short-view",
properties: {
date: {
type: Object,
observer: '_dayChanged'
},
details: {
type: Object,
value: function () {
return {}
}
},
hideMonth: {
type: Boolean,
reflectToAttribute: true,
value: false
},
hideName: {
type: Boolean,
reflectToAttribute: true,
value: false
},
holiday: {
type: Boolean,
reflectToAttribute: true,
value: false
},
faded: {
type: Boolean,
reflectToAttribute: true,
value: false
}
},
_dayChanged: function () {
var cal = new Calendar();
cal.date = this.date;
this.details = {
date: this.date.getDate(),
name: cal.getDayName(),
day: this.date.getDay(),
month: cal.getMonthName()
};
}
})
</script>
</dom-module>
不幸的是它只渲染:host
样式并忽略:host[faded]
,当我尝试将组件包含到另一个组件中时:
<template is="dom-repeat" items="[[week]]">
<calendar-day-short-view date="[[item]]" class="flex" hide-month faded></calendar-day-short-view>
</template>
你在两个方面都错了。 要使用的正确选择器是:host([faded])
。
:host ([faded])
不是有效的选择器。 需要删除空间,因为CSS禁止在函数名称及其伴随括号之间使用空格 。 此外, 除非是识别的函数令牌的一部分, 否则不允许在选择器中使用括号 。
:host[faded]
在语法上是合理的,但是它不起作用,因为影子主机是无特征的 ,因此在该上下文中不能与属性选择器匹配(即当与:host
伪复合时)。 这就是为:host
提供以下形式的函数变体:host()
的形式,因此您可以将主机元素与特定的复合选择器匹配,同时仍然处理此限制。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.