CSS: content does not affect actual button content

[alexciesielski]

Description

I am using the paper-button's toggle functionality and want to set the button-content by CSS. In the demo, the toggle-button first is green and after setting it active it becomes red.

I need to extend this functionality to change the text inside the button based on the state.

Expected outcome

Setting these CSS-values should have the button change its content based on active state.

paper-button.my-toggle { background-color: var(--paper-red-500); content: "This button is now deactivated"; } paper-button.my-toggle[active] { background-color: var(--paper-green-500); content: "This button is now active"; }

Actual outcome

The content does not change.

Steps to reproduce

1. Put a paper-button toggles element in the page.
2. Open the page in a web browser.
3. Click the paper-button toggles element.
4. The color changes, the content however does not.

[keanulee]

According to spec (https://developer.mozilla.org/en-US/docs/Web/CSS/content), this should not be possible because the content is not a ::before or ::after pseudo-element. Since the text is just in the paper-button, you can set in programatically:

var paperButton = document.querySelector('paper-button');
Polymer.dom(paperButton).innerHTML = 'foobar';

[alexciesielski]

After doing this the on-click function

this.$.my-paper-button.innerHTML = "Mail sent";

I get the following error:

Uncaught TypeError: Cannot read property 'nodeType' of null
paper-ripple.html:565

[keanulee]

@alexciesielski Be sure to use the Polymer DOM API when manipulating innerHTML (see https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api)

Polymer.dom(this.$.myPaperButton).innerHTML = 'Mail sent';

Note that my-paper-button is not a valid JavaScript identifier.