Add/Remove iron-selected class based on the paper-tab selection - polymer

Question

I have started learning Polymer & lit-element and was working on active & inactive status grid where i have used paper-tabs with iron-pages.
Question: When I switch between the paper-tabs, the iron-selected class is adding to the paper-tab links but not getting added to the iron-pages content.
How to make the iron-selected class work with the iron-pages content?
Any solution would be great!
constructor() {
super();
this.currentPage = 0;
}
render() {
return html `
<div class="card">
<paper-tabs scrollable selected=${this.currentPage}>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<iron-pages selected=${this.currentPage}>
<div>some story for tab 1</div>
<div>some story for tab 2</div>
<div>some story for tab 3</div>
</iron-pages>
</div>
`;
}
}

Answer 1

Unlike Polymer, lit-html doesn't have a two way data binding mechanism so you have to take care of updating the currentPage property in the selected-changed event:
render() {
return html`
<div class="card">
<paper-tabs scrollable
selected=${this.currentPage /* This is unidirectional */}
#selected-changed=${e => this.currentPage = e.detail.value}>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<iron-pages selected=${this.currentPage}>
<div>some story for tab 1</div>
<div>some story for tab 2</div>
<div>some story for tab 3</div>
</iron-pages>
</div>
`;
}