javascript - How to write a file directory tree using polymer?

Question

I just looked at the basic structure of polymer two days ago. Now I need to use it to write a file directory tree, so I retrieved a tree tag written by someone else on git, but I don’t know how to use it. I hope you can have a deeper understanding. The master of polymer can answer it, thank you!
The following is the content of the tag:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="iris-treeview">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
        color: var(--mydoc-brown-1000);
      }
      
      span {
        cursor: pointer;
      }
      
      iris-treeview:before {
        content: '';
        display: inline-block;
        border-top: 2px solid;
        padding-left: 15px;
        margin-left: -25px;
        height: 5px;
      }
      
      .branch {
        padding-left: 25px;
        border-left: 2px solid;
        position: relative;
      }
      
      .branch:last-of-type:after {
        content: '';
        border-left: 2px solid;
        position: absolute;
        top: 10px;
        bottom: 0;
        color: white;
        margin-left: -27px;
      }
      
      .selected {
        color: var(--mydoc-brown-400);
      }
    </style>
    <content></content>

    <template is="dom-if" if="[[isBranch]]">
      <template id="list" is="dom-repeat" items="[[tier]]">
        <p class="branch" changed$="[[isChanged(item,switch)]]">
          <iris-treeview display-depth="[[down]]" data="[[data]]" selected="{{selected}}" display-leaf="[[displayLeaf]]" path$="[[path]].[[item]]">
            <span class$="{{treeviewClass(selected,item)}}" on-click="branchClick">[[item]]</span>
          </iris-treeview>
        </p>
      </template>
    </template>

    <template is="dom-if" if="[[isLeaf]]">
      <span class="leaf" on-click="leafClick" hidden$="[[!displayLeaf]]">[[value]]</span>
    </template>

  </template>
  <script>
    'use strict'
    Polymer({
      is: 'iris-treeview',
      properties: {
        data: {
          type: Object,
          observer: '_dataChanged'
        },
        displayDepth: {
          type: Number,
          value: 10
        },
        displayLeaf: {
          type: Boolean,
          value: false
        },
        path: {
          type: String,
          value: ''
        },
        selected: {
          type: Object,
          notify: true
        }
      },
      observers: ['_deepChanged(data.*)'],
      _deepChanged(data) {
        this.set('switch', !this.switch);
      },
      isChanged(item, s) {
        return false;
      },
      treeviewClass(sel, item) {
        return (sel == this.path + '.' + item) ? 'selected' : "";
      },
      branchClick(e) {
        console.log(this.path);
        let item = e.model.item;
        let branch = this.data[item]
        let path = this.path + '.' + item;

        this.fire('select', {
          type: 'branch',
          value: branch,
          path: path
        });
        this.fire('select-branch', {
          value: branch,
          path: path
        });

        this.set('selected', path);
      },
      leafClick(e) {
        let path = this.path + '.' + item;
        this.fire('select', {
          type: 'leaf',
          value: this.value,
          path: path
        });

        this.fire('select-leaf', {
          value: this.value,
          path: path
        });

        this.set('selected', path);
      },
      _dataChanged(data) {
        if (this.displayDepth <= 0) return;
        this.down = this.displayDepth !== false ? this.displayDepth - 1 : false;
        let q = this.path.split('.');

        let current = _.slice(q, 1).length ? _.get(this.data, _.slice(q, 1)) : this.data;

        let branch = true;

        if (_.isObject(data)) {
          this.set('tier', _.keys(current));
        } else {
          branch = !branch;
          this.set('value', data);
        }

        this.set('isBranch', branch);
        this.set('isLeaf', !branch);
      },
      getTier(item) {
        return this.data[item]
      }
    });
  </script>
</dom-module>

Answer 1

The calling method is the same as the self-reference method in the component, passing properties and writing children

<iris-treeview
    display-depth="[[down]]"
    data="[[data]]"
    selected="{{selected}}"
    display-leaf="[[displayLeaf]]"
    path$="[[path]].[[item]]"
>
  <span class$="{{treeviewClass(selected,item)}}" on-click="branchClick">
    [[item]]
  </span>
</iris-treeview>