Setting the active attribute of a paper-button inserted into a slot using setAttribute requires calling it twice before it is updated.

[eriklumme]

Description

Imperatively setting the active attribute of a paper-button inserted into a slot requires setting it twice before it is updated.

Expected outcome

The attribute is updated the first time.

Actual outcome

The attribute is not updated until the second time.

Live Demo

https://jsbin.com/lalarivoli/1/edit?html,console,output

Steps to reproduce

1. Create a Polymer element with a slot.
2. On ready(), set the active attribute of the <paper-button> in the slot to true.
3. Create a parent element that holds the child element and inserts a <paper-button> into the slot.

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[eriklumme]

This seems to be the case with other properties such as raised too, but not properties not defined in the paper-button such as my-attribute.

Instead of setting active twice, one can set raised once and then active, at which point raised will be false and active will be true. I.e. the first time any property defined in paper-button is set, it is not updated. After that, all properties are immediately updated.

[valdrinkoshi]

That happens because these properties do reflectToAttribute and have a default value, e.g. see active property. I'd suggest to set the property instead of the attribute, e.g.

ready() {
  super.ready();
  const paperButton = this.querySelector('paper-button');
  paperButton.active = true;
  console.log(paperButton.hasAttribute('active')); // true \o/
}