Recently, I've been diving into the world of the Home Assistant project's usage of Polymer app-layout elements combined with the Lit library. However, I've hit a roadblock where I can't seem to update a public property in my custom component to affect an attribute on a nested Polymer element.
Let me share a snippet of my current code:
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}
>
<!-- buttons and content here -->
</app-drawer-layout>
`;
}
protected firstUpdated() {
// method here
}
protected updated(changedProps: PropertyValues) {
// method here
}
private toggleSidebar() {
// method here
}
private get _sidebarNarrow() {
return this.narrow;
}
private get drawer(): AppDrawerElement {
// method here
}
private get appLayout(): AppDrawerLayoutElement {
// method here
}
}My challenge lies within ?persistent=${!this.narrow} in my render() function. Despite using this syntax to bind the "persistent" property of the app-drawer Polymer element to my "narrow" property, which is controlled by a media query, the attribute does not get added or removed as expected. The "persistent" attribute continues to toggle at 640px, its default value.
Even setting responsiveWidth="870px" on app-drawer-layout seems to have no impact.
Why isn't this approach working as intended? I followed the guidance for Boolean properties outlined in Lit's guide for Polymer users. While it functions flawlessly in the Home Assistant project, I seem to be overlooking some crucial aspects.