css - How to customize predefined elements -

i want change color values of polymer paper-input.

i read guide, didn't made sense me. never worked css variables, should done according mozilla css specs

// shadow dom body /deep/ .gold-cc-cvc-input::shadow {     --paper-input-container-focus-color: $color;     --paper-input-container-color: $color;     --paper-input-container-invalid-color: $color;     --paper-input-container-input-color: $color;      text-align: left;     margin: auto; } 

i tried execute css variables, styles don't apply.

i'm running in circles here, awesome if polymer experience me.

well, thing missing here fact need is="custom-style" attribute on styles.

  <style is="custom-style">..</style> 

also body /deep/ .gold-cc-cvc-input::shadow doesn't work reason, ended using :root .gold-cc-cvc-input instead.

final code:

:root .forms-input  {     --paper-input-container-focus-color: $color;     --paper-input-container-color: $color;     --paper-input-container-invalid-color: $color;     --paper-input-container-input-color: $color; } 

if polymer team reads this: ps: documentation needs complete code examples, hard guess there. less text more code !