聚合物样式:host[attribute]失败

Question

获得具有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>

Answer 1

你两方面都错了。正确使用的选择器是:host([faded])。

• :host ([faded])不是一个有效的选择器。这个空格需要去掉，因为CSS禁止在函数名和括号之间有空格。此外，选择器中不允许使用括号，除非是可识别的函数标记的一部分。

• :host[faded]在语法上是正确的，但它不会工作，因为影子主机是无特征的，因此不能在该上下文中由属性选择器匹配(即当与:host伪复合时)。这就是为什么以:host()的形式为:host提供了一个功能变体，这样您就可以针对特定的复合选择器匹配宿主元素，同时仍然处理此限制。