interact.js - How to access Polymer functions from JS -

sorry if comes out bit garbled, i'm not sure how ask question.

what trying keep dom synced localstorage value, , updating localstorage value interact.js mouse event.

currently, able set localstorage value, having problems updating dom.

my current build within polymer framework, having trouble selecting shadow dom content.

the dom tree looks like

parent-element   # shadow root     el     el     div       custom element     el     el 

here ways have failed solve problem. custom element in pure js, since not sure how wrap interact.js function in polymer:

1. i tried directly accessing parent-element's shadow dom custom element in pure js.

  var shadowdomnode = document.queryselector('parent-element');   var dom_object_1 = shadowdomnode.queryselector('#dom_object_1');   dom_object_1.innerhtml = localstorage.dom_object_1; 

2. i tried selecting helper updatedom() function parent polymer element , running custom element's setter directly.

if (event.dy > 0) {     this.$$('parent-element').updatedom(); } 

maybe taking wrong approach entirely, haven't been able find analogues interact.js in using native polymer functions.

i hope question clear enough...

if ignore interact.js part of problem , focus on polymer, solve without coupling two.

to bind localstorage value polymer, use <iron-localstorage> element. in following example, localstorage value named flavor_1_amount loaded , stored property named _flavor1amount. if value doesn't exist in localstorage or empty, <iron-localstorage> element fires event (iron-localstorage-load-empty), allows bind callback (e.g., initialize it).

<iron-localstorage name="flavor_1_amount"                    value="{{_flavor1amount}}"                    use-raw                    on-iron-localstorage-load-empty="_initflavor1amount"> </iron-localstorage> 

in same element, provide input user update localstorage value.

<paper-input label="flavor amount (ml)" value="{{_flavor1amount}}"></paper-input> 

and can use <iron-localstorage>.reload() keep data binding in sync, assuming changed externally.

see codepen full demo. check localstorage chrome devtools: