问题描述
我正在使用文档 https://lit-element.polymer-project.org/guide/templates 中提到的绑定到布尔属性,如下所示。
这在 Chrome 中运行良好,但由于某种原因在 Internet Explorer 11 中不起作用。它总是表现得像假的。并且不添加属性。
是否存在已知问题或我遗漏了什么。
模拟场景:
创建两个自定义元素,父元素和子元素。通过子元素布尔属性传递布尔属性,并使用该属性使启用禁用文本框。
父元素
View Binding
子元素
/**
* @license
* copyright (c) 2019 The polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
import {LitElement,html,customElement,property,css} from 'lit-element';
import './my-other-element';
/**
* An example element.
*
* @slot - This element has a slot
* @csspart button - The button
*/
@customElement('my-element')
export class MyElement extends LitElement {
static styles = css`
:host {
display: block;
border: solid 1px gray;
padding: 16px;
max-width: 800px;
}
`;
/**
* The name to say "Hello" to.
*/
@property()
name = 'World';
/**
* The number of times the button has been clicked.
*/
@property({type: Number})
count = 0;
render() {
return html`
<h1>Hello,${this.name}!</h1>
<button @click=${this._onClick} part="button">
Click Count: ${this.count}
</button>
<my-other-element ?makedisable="${true}"></my-other-element>
<slot></slot>
`;
}
private _onClick() {
this.count++;
}
foo(): string {
return 'foo';
}
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement;
}
}
解决方法
在 lit-element 中,如果您在构造函数中添加一个布尔值并且它为 true,则不能为此设置 false。
我已经像 <input type="text" .disabled="${false}">
一样尝试过它并且有效。