How to use the @material/top-app-bar.MDCTopAppBar function in @material/top-app-bar

updated() {
    this.topAppBar.destroy()
    this.topAppBar = new MDCTopAppBar(this.shadowRoot.querySelector('.mdc-top-app-bar'))

    // Get the target scrollbar of 'm-top-app-bar' and trigger the animation based on this scrollbar (JSX use) (获取 'm-top-app-bar' 的目标滚动条，根据此滚动条触发动画)
    if(this.props.scrollTarget) {  //(JSX 使用)
      this.topAppBar.setScrollTarget(this.props.scrollTarget)
    } else { // (原生 js 使用)
      if(this.props.scrollTargetId) {
        const findTarge = document.querySelector('#' + this.props.scrollTargetId)
        findTarge ? this.topAppBar.setScrollTarget(findTarge) : this.topAppBar.setScrollTarget(window)
      } else {
        this.topAppBar.setScrollTarget(window)
      }
    }
  }

componentDidMount() {
    this.MDComponent = new MDCTopAppBar(this.control);
    this.MDComponent.listen('MDCTopAppBar:nav', this._onNav);
  }
  componentWillUnmount() {

public componentDidMount() {
    super.componentDidMount();
    if (this.control) {
      const comp = new MDCTopAppBar(this.control);
      comp.listen('MDCTopAppBar:nav', this.onNav);
      this.MDComponent = comp;
    }
  }

onBeforeFlow() {
        const topAppBarElement = this.querySelector('.mdc-top-app-bar');
        if (topAppBarElement) {
           this.mwcInstance = new MDCTopAppBar(topAppBarElement);
        }
    }
}

const topAppBar = [].map.call(document.querySelectorAll('.mdc-top-app-bar'), function (e: any) {
        return new MDCTopAppBar(e)
    })
    const textField = [].map.call(document.querySelectorAll('.mdc-text-field'), function (e: any) {

installed() {
    this.topAppBar = new MDCTopAppBar(this.shadowRoot.querySelector('.mdc-top-app-bar'))

    domReady(() => {
      this._setChildrenAttribute()
      this.update()
    })
  }