I have an <iron-pages> element with a few children, each of which is a <section> with some text content. By default, I can change the selected attribute of the <iron-pages> element, and the shown child <section> will change accordingly.
I want to use a custom attribute on the children to select them: data-page. I add the associated attrForSelected="data-page" attribute to the <iron-pages> and a data-page attribute to each child with a different string (such as home). With this system, however, the children are never displayed. Even a child with data-page="home" as an attribute will not show when the <iron-pages> selected attribute is set to home.
What am I doing wrong with custom attributes for selection?
attrForSelected="data-page" should be attr-for-selected="data-page"
CamelCase properties are translated to dashed attributes (docs).