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

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]) 不是有效的选择器。 space 需要删除，因为 CSS forbids having whitespace between a function name and its accompanying parentheses. Furthermore, parentheses are not allowed in a selector except when part of a recognized function token.
:host[faded] 在语法上是合理的，但它不会工作，因为影子主机是 featureless，因此不能被该上下文中的属性选择器匹配（即当复合与 :host 伪）。这就是为什么以 :host() 的形式为 :host 提供功能变体的原因，因此您可以将宿主元素与特定的复合选择器匹配，同时仍然处理此限制。

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

Polymer styling :host[attribute] failed

html

css

css-selectors

web-component

polymer