selected-attribute problems with LitElement and polymer 3

[markcellus]

Hello, thanks for building this awesome package!

Description

I am having an issue using the selected-attribute option with pages that extend LitElement using Polymer 3. Here I have created a test-page custom element that should have observers fire when active property is set, however it does not work.

<iron-pages 
  selected="test" 
  attr-for-selected="name"
  selected-attribute="active"
>
  <test-page name="test"></test-page>
</iron-pages>

import {html, LitElement} from '@polymer/lit-element/lit-element.js';
export class TestPage extends LitElement {

static get properties() {
    return {
      active: String
    }
  }
  _render() {
    // according to LitElement, this render method gets called everytime `active` changes
    console.log(this.active) // but prints undefined :(
    return html`<div>Test page</div>`;
  }
}

customElements.define('test-page', TestPage);

It appears that the toggleAttribute() is being called from Polymer's legacy-element-mixin . I suspect that this is an issue because it is not updating the lit element's observer on the active property.

Expected outcome

The observers on active property to fire and active property is truthy.

Actual outcome

active property doesn't seem to ever get set and no observers are fired so the element can re-render.

Browsers Affected

I've tested and only confirmed that this does not work on Chrome and Firefox, but I suspect it doesn't work on any other browsers.

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10