Lit web组件未更新聚合物元素属性

Question

我一直在参考Home Assistant项目对Lit库中Polymer应用程序布局元素的使用。我遇到的问题是，我无法在自定义组件中获取公共属性来更新嵌套Polymer元素的属性。

这是我目前的代码：

import { LitElement, html, css, PropertyValues } from 'lit';
import { customElement, state, query, property } from 'lit/decorators.js';
import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
import type { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
import "@polymer/app-layout/app-drawer/app-drawer";
import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer";
import { listenMediaQuery } from "./common/media-query";
import { toggleAttribute } from "./common/toggle-attribute";

declare global {
// for fire event
interface WSDomEvents {
"ab-toggle-menu": undefined;
}
}
@customElement('ab-app')
class WsApp extends LitElement {
static styles = css`
:host {
--app-drawer-width: 56px;
}
:host([expanded]) {
--app-drawer-width: 256px;
}
button {
width: 100%;
height: 56px;
border: 0;
background-color: var(--color-accent);
color: #FFF;
display: flex;
align-items: center;
font-size: var(--font-size-large);
}
svg {
padding: 8px;
height: 100%;
width: auto;
}
.label {
display: none;
padding: 10px;
}
:host([expanded]) .label {
display: inline;
}
.ab-sidebar {
background-color: var(--color-accent)!important;
height: 100%;
}
`;
@property({ type: Boolean, reflect: true }) public narrow!: boolean;
@property({ type: Boolean }) public alwaysExpand = false;
constructor() {
super();
listenMediaQuery("(max-width: 870px)", (matches) => {
this.narrow = matches;
});
}
protected render() {
const sidebarNarrow = this._sidebarNarrow
return html`
<app-drawer-layout
responsiveWidth="870px"
>
<app-drawer
class="app-drawer"
swipe-open
slot="drawer"
align="left"
?persistent=${!this.narrow}
>
<div class="ab-sidebar">
<button @click=${this.toggleSidebar}>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>
<span class="label">Collapse Menu</span>
</button>
<button @click=${this.toggleSidebar}>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</svg>
<span class="label">Home</span>
</button>
<button @click=${this.toggleSidebar}>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,3C10.73,3 9.6,3.8 9.18,5H3V7H4.95L2,14C1.53,16 3,17 5.5,17C8,17 9.56,16 9,14L6.05,7H9.17C9.5,7.85 10.15,8.5 11,8.83V20H2V22H22V20H13V8.82C13.85,8.5 14.5,7.85 14.82,7H17.95L15,14C14.53,16 16,17 18.5,17C21,17 22.56,16 22,14L19.05,7H21V5H14.83C14.4,3.8 13.27,3 12,3M12,5A1,1 0 0,1 13,6A1,1 0 0,1 12,7A1,1 0 0,1 11,6A1,1 0 0,1 12,5M5.5,10.25L7,14H4L5.5,10.25M18.5,10.25L20,14H17L18.5,10.25Z" />
</svg>
<span class="label">Weighing</span>
</button>
<button @click=${this.toggleSidebar}>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M17 5H20L18.5 7L17 5M3 2H21C22.11 2 23 2.9 23 4V8C23 9.11 22.11 10 21 10H16V20C16 21.11 15.11 22 14 22H3C1.9 22 1 21.11 1 20V4C1 2.9 1.9 2 3 2M3 4V8H14V4H3M21 8V4H16V8H21M3 20H14V10H3V20M5 12H12V14H5V12M5 16H12V18H5V16Z" />
</svg>
<span class="label">Edit</span>
</button>
</div>
</app-drawer>
<slot name="app"></slot>
</app-drawer-layout>
`;
}
protected firstUpdated() {
this.addEventListener("ab-toggle-menu", () => {
if (this._sidebarNarrow) {
if (this.drawer.opened) {
this.drawer.close();
} else {
this.drawer.open();
}
} else {
setTimeout(() => this.appLayout.resetLayout());
}
});
}
protected updated(changedProps: PropertyValues) {
if (changedProps.has("alwaysExpand")) {
toggleAttribute(this, "expanded", this.alwaysExpand);
}
}
private _toggleSidebar(ev: CustomEvent) {
if (ev.detail.action !== "tap") {
return;
}
this.dispatchEvent(new CustomEvent('ab-toggle-menu'));
}
private toggleSidebar() {
this.toggleAttribute("expanded");
//this.requestUpdate;
}


private get _sidebarNarrow() {
return this.narrow;
}
private get drawer(): AppDrawerElement {
return this.shadowRoot!.querySelector("app-drawer")!;
}
private get appLayout(): AppDrawerLayoutElement {
return this.shadowRoot!.querySelector("app-drawer-layout")!;
}
}

我正在挣扎的是render((下的?persistent=${!this.narrow}。聚合物元素应用程序抽屉具有性质"；持久性"；，然而将其设置为我的"；窄的"；属性(由媒体查询驱动(不添加或删除"；持久的"；属性。"；持久的"；属性仍然在默认值640px处切换。

应用程序抽屉布局上的responsiveWidth="870px"也不起任何作用。

为什么不起作用？我遵循了Lit聚合物用户指南中关于布尔性质的建议。它显然适用于家庭助理项目，但我不知道我缺少了什么。

Answer 1

使用属性而不是属性，方法是在其前面加一个.:

.persistent=${!this.narrow}