reactjs - Polymer with Top-down Pattern -

i trying replace react polymer reduce js/jsx , use more html.

in react, element receives props, , sends out sub-props children this:

// pseudocode  export class parent extends react.component {   render() {     return (       <child a={this.props.a} b={this.prop.b} />       <child a={this.props.c} b={this.prop.d} />     );   } } 

in polymer, in same way, want root polymer element have large state tree, , give subtrees children. started replacing leaf react components polymer components.

// pseudocode  export class parent extends react.component {   render() {     return (       <child a={json.stringify(this.props.a)} b=a={json.stringify(this.props.b)}/>       <child a={json.stringify(this.props.c)} b=a={json.stringify(this.props.d)}/>     );   } }  <dom-module id="child">   <template>     [[a.name]] said [[b.txt]]    </template>   <script>     polymer({       is: 'child',       properties: {         a: object,         b: object       }     });   </script> </dom-module> 

this works, there potential inefficiencies worried about:

1. when passing json objects web-component children, needs serialized json because dom attributes accept strings or boolean. wasteful marshalling. large object, react uses reference web componenets copy , keep object serialized json string. correct?

2. html code shows huge json string embedded in tag, <child a='{... long json ...}' />. html code looks ugly, , attributes of leaf component stored in ancestors, same json string appears in html code many times. if dom tree has depth d, attribute repeated d times. correct?

3. can avoid serialization , use references when parent web-component passes objects children?

4. what right way apply global state tree web component tree? polymer efficiently work top-down pattern? can avoid bloatd-html?