AlexNasonov AlexNasonov - 3 months ago 15
CSS Question

Polymer styling :host[attribute] failed

Got simple component with

faded
attribute.

<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:

<template is="dom-repeat" items="[[week]]">
<calendar-day-short-view date="[[item]]" class="flex" hide-month faded></calendar-day-short-view>
</template>

Answer

You have it wrong on both counts. The correct selector to use is :host([faded]).