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

概述得到了带有淡化属性的简单组件. <template> <style> :host { display: block; height: 7em; background: white; border: 1px solid var(--pap 得到了带有淡化属性的简单组件.

<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  hIDden="[[hIDeMonth]]">[[details.month]]</div>            <div >                <span >[[details.date]]</span>                <div hIDden="[[hIDename]]">                    <div>[[details.name]]</div>                    <div ></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,holIDay: {                    type: Boolean,faded: {                    type: Boolean,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 [faded],当我尝试将组件包含到另一个组件中时：

<template is="dom-repeat" items="[[week]]"><calendar-day-short-vIEw date="[[item]]"  hIDe-month faded></calendar-day-short-vIEw></template>

解决方法 你在两个方面都错了.要使用的正确选择器是：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()的形式,因此您可以将主机元素与特定的复合选择器匹配,同时仍然处理此限制.

总结

以上是内存溢出为你收集整理的html – 聚合物样式：主机[属性]失败全部内容，希望文章能够帮你解决html – 聚合物样式：主机[属性]失败所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。