html - Polymer styling :host[attribute] failed -

got simple component 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 renders :host style , ignores :host[faded], when try include component 1 this:

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

you have wrong on both counts. correct selector use :host([faded]).

• :host ([faded]) not valid selector. space needs dropped, because css forbids having whitespace between function name , accompanying parentheses. furthermore, parentheses not allowed in selector except when part of recognized function token.

• :host[faded] grammatically sound, won't work because shadow host featureless, , therefore cannot matched attribute selectors in context (i.e. when compounded :host pseudo). why functional variant provided :host in form of :host(), can match host element against specific compound selector while still dealing restriction.