Native custom properties does not work

[tomalec]

Description

According to https://www.webcomponents.org/element/PolymerElements/paper-toggle-button/paper-toggle-button#styling "custom properties are available for styling"

I would like to use them in stylesheet loaded via <link> together with lots of other stuff.

paper-toggle-button{
  --paper-toggle-button-unchecked-button-color: pink;
}

<paper-toggle-button></paper-toggle-button>

Expected outcome

Button should be pink

Actual outcome

Button is white

Live Demo

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

Steps to reproduce

1. Put a paper-toggle-button element in the page.
2. Apply custom property to it, like

    paper-toggle-button{
      --paper-toggle-button-unchecked-button-color: pink;
    }

3. Open the page in a web browser.

Browsers Affected

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

---

For vanilla Shadow DOM it works like charm
http://jsbin.com/legefom/2/edit?html,output