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

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(),因此您可以将主机元素与特定的复合选择器匹配,同时仍然处理此限制.