聚合物样式：主机 [属性] 失败

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 forbids having whitespace between a function name and its accompanying parentheses。此外，parentheses are not allowed in a selector except when part of a recognized function token。

• :host[faded] 在语法上是正确的，但它不起作用，因为影子主机是 featureless，因此在该上下文中无法被属性选择器匹配（即当 compounded与:host 伪）。这就是为什么以:host() 的形式为:host 提供功能变体的原因，因此您可以在处理此限制的同时将宿主元素与特定的复合选择器进行匹配。