[英]Polymer styling :host[attribute] failed
Got simple component with faded
attribute. 得到了带有
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>
Unfortunately it renders only :host
style and ignores :host[faded]
, when I try to include the component into another one like this: 不幸的是它只渲染
: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>
You have it wrong on both counts. 你在两个方面都错了。 The correct selector to use is
:host([faded])
. 要使用的正确选择器是
:host([faded])
。
:host ([faded])
is not a valid selector. :host ([faded])
不是有效的选择器。 The space needs to be dropped, because CSS forbids having whitespace between a function name and its accompanying parentheses . 需要删除空间,因为CSS禁止在函数名称及其伴随括号之间使用空格 。 Furthermore, parentheses are not allowed in a selector except when part of a recognized function token .
此外, 除非是识别的函数令牌的一部分, 否则不允许在选择器中使用括号 。
:host[faded]
is grammatically sound, but it won't work because the shadow host is featureless , and therefore cannot be matched by attribute selectors in that context (ie when compounded with the :host
pseudo). :host[faded]
在语法上是合理的,但是它不起作用,因为影子主机是无特征的 ,因此在该上下文中不能与属性选择器匹配(即当与:host
伪复合时)。 This is why a functional variant is provided for :host
in the form of :host()
, so you can match the host element against a specific compound selector while still dealing with this restriction. 这就是为
:host
提供以下形式的函数变体:host()
的形式,因此您可以将主机元素与特定的复合选择器匹配,同时仍然处理此限制。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.