Please implement built-in method(s) for any Polymer element

[Anid4u2c]

In file pwa-starter-kit/src/components/my-app.js, the app-drawer component uses one of the documented properties, "opened", and one of the documented events, "opened-changed" like this: <!-- Drawer content --> <app-drawer .opened="${this._drawerOpened}" @opened-changed="${this._drawerOpenedChanged}">

I'd like to see an implementation of one of the documented methods, like toggle... I understand the Polymer team has done quite a bunch of work regarding moving away from Bower to NPM, and streamlining documentation (github.com, npmjs.com, webcomponents.org, yet webcomponents.org remains the only source for sub-elements (like app-drawer).

I did successfully implement a test button that when fired determines the state of _drawerOpened and fires updateDrawerState: _testButtonClicked(e) { const newState = !this._drawerOpened; store.dispatch(updateDrawerState(newState)); }

The example above get's the job done, yet I'm still wondering how to access the documented methods. I checked out the Polymer 3 docs, and I really hope that we don't have to add event listener manually, like with custom elements...?

I hope it's clear that I did some digging, and I really hope it's something simple, like syntax or something.

[keanulee]

In the "functional UI" pattern (i.e. UI = f(state) ) we're striving for in LitElement/pwa-starter-kit, we try to avoid having to get references and call methods on rendered DOM elements (similar to React's opinion on refs). However, in cases where you do need DOM references, you can do so in the updated method. For example, we had to do this in Shop:

https://github.com/Polymer/shop/blob/085f972bcdde326226fd5f35c181a5d80d6c4a72/src/components/shop-app.js#L318-L319

[Anid4u2c]

Thanks again @keanulee! Since I'm using the Polymer/pwa-starter-kit as a template for my development project, I'll stick to similar guidelines.

That being said, which way would be advised to show/hide Polymer's app-drawer element?

What do you think of this working example that simply changes the app-drawer ".opened" property: _testButtonClicked() { const newState = !this._drawerOpened; this._drawerOpened = newState; }

[jsilvermist]

You can see how the drawer is toggled in the responsive drawer layout using Redux here: https://github.com/Polymer/pwa-starter-kit/tree/template-responsive-drawer-layout

You could create something similar using event based logic if not using Redux.

[Anid4u2c]

@jsilvermist I believe that's what I'm accomplishing by manually setting the app-drawer 'opened' property: <app-drawer .opened="${this._drawerOpened}" .persistent="${this._wideLayout}" @opened-changed="${this._drawerOpenedChanged}">

As soon as the _drawerOpened property is changed, it triggers the stateChanged(state) function.

According to the PWA Starter Kit > Redux and state management, and indicates that "stateChanged gets called any time the store updates", which means it is using Redux.

I'm sure there's more than one way to get it done, yet I'm hoping that this is similar to what contributors and members would do, so that further development doesn't require me to rewrite my code, you know?