javascript - Polymer 1.0, How to implement Infinite nested dom-repeat -

i have following json obj,

    categorylist = [{     "title": "computers",     "categories":      [       {         "title": "laptops",         "categories":          [           {             "title": "ultrabooks",             "categories":              [               {                 "title": "lenovo",                 "categories":                  [                   {                     "title": "i5 intel"                   }                 ]               }             ]           },           {             "title": "dell"           },           {             "title": "macbooks",             "categories":              [               {                 "title": "air"               },                {                 "title": "pro"               }             ]           }         ]       },        {         "title": "desktops"       },        {         "title": "tablets",         "categories":          [           {             "title": "apple"           },            {             "title": "android"           }         ]       },        {         "title": "printers"       }     ]   }] 

as can see, each categories have child categories literally go on forever. trying display of them can't figure out how this.

this have far (obviously gets first child in each categories):

<template is="dom-repeat" items="{{categorylist}}" as="category">     <template is="dom-if" if="{{_hasdata(category.categories)}}">       <div>{{category.title}}</div>       <template is="dom-repeat" items="{{category.categories}}" as="item">          <div>{{item.title}}</div>       </template>   </template> </template> 

you can use recursive code here. here's plunker same.

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>  <link rel="import" href="https://polygit.org/components/polymer/polymer.html">  <dom-module id="infinite-repeat">    <template>      <template is="dom-repeat" items={{categories}} as="category">        <div>{{category.title}}</div>        <template is="dom-repeat" items="{{category.categories}}" as="item">          <div>{{item.title}}</div>          <template is="dom-if" if="{{_hasdata(item.categories)}}">            <infinite-repeat categories={{item.categories}}></infinite-repeat>          </template>        </template>      </template>    </template>  </dom-module>  <script>    polymer({      is: 'infinite-repeat',      properties: {        categories: {          type: array,          value: function() {            return [{              "title": "computers",              "categories": [{                "title": "laptops",                "categories": [{                  "title": "ultrabooks",                  "categories": [{                    "title": "lenovo",                    "categories": [{                      "title": "i5 intel"                    }]                  }]                }, {                  "title": "dell"                }, {                  "title": "macbooks",                  "categories": [{                    "title": "air"                  }, {                    "title": "pro"                  }]                }]              }, {                "title": "desktops"              }, {                "title": "tablets",                "categories": [{                  "title": "apple"                }, {                  "title": "android"                }]              }, {                "title": "printers"              }]            }];          }        }      },      _hasdata: function(item) {        return item && item.length > 0;      }    })  </script>    <infinite-repeat></infinite-repeat>