得到了带有淡化属性的简单组件.
<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,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]]" class="flex" 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()的形式,因此您可以将主机元素与特定的复合选择器匹配,同时仍然处理此限制.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。