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，因此无法正常工作，因此在该上下文中无法与属性选择器匹配（即使用:host伪复合。这就是:host以:host()形式提供功能变体的原因，因此您可以将主机元素与特定的复合选择器匹配，同时仍然处理此限制。

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

1 个答案: