How to use the @material/snackbar.MDCSnackbar function in @material/snackbar

mounted: function() {
    this.snackbar = new MDCSnackbar(this.$refs.snackbar);
    this.snackbar.foundation_.autoDismissTimeoutMs_ = 31556952000; // 1 year
    this.snackbar.closeOnEscape = false;

    browser.runtime.onMessage.addListener(this.onMessage);
    browser.runtime.sendMessage({id: 'selectFrameId'});
  }
};

mounted: function() {
    this.snackbar = new MDCSnackbar(this.$refs.snackbar);
    this.snackbar.foundation_.autoDismissTimeoutMs_ = 31556952000; // 1 year
    this.snackbar.closeOnEscape = false;

    browser.runtime.onMessage.addListener(this.onMessage);
    browser.runtime.sendMessage({id: 'captureFrameId'});
  }
};

this._settingsViewPromise = import('./views/settings.js')
        .then((module) => this._viewClasses.SettingsView = module.SettingsView)
        .then(() => this._booted)
        .then(() => new this._viewClasses.SettingsView(this, this._model,
            this._screens.settings, this._animationHelper));

    this._booted.then(() => this._hideLoadingScreen());

    // MDC-Web component init.

    MDCRipple.attachTo(document.querySelector('.mm-convert__update'));
    const menu =
        new MDCSimpleMenu(document.querySelector('.mdc-toolbar__menu'));

    this._snackbar = new MDCSnackbar(document.querySelector('.mm-snackbar'));

    // Add event listener to button to toggle the menu on and off.
    this._elements.more.addEventListener('click', () =>
        this._booted.then(() => (menu.open = !menu.open)));

    // Add event listener to open Settings screen.
    document.querySelector('.mm-menu__settings').addEventListener('click',
        () => this._settingsViewPromise.then((view) => {
          view.show(this._screens.convert);
          history.pushState({page: 'settings'}, 'Settings');
        }));

    const ratesDialog =
        new MDCDialog(document.querySelector('#mm-rates-dialog'));
    document.querySelector('.mm-menu__rates').addEventListener('click', () => {
      this._updateRateInfo();

const common = (language: string = 'en'): void => {
  const name = $('#name');
  const email = $('#email');
  const comment = $('#comment');
  const sendButton = $('#send-button');

  const sendToastEl = $('#send-toast');
  const sendToast = new MDCSnackbar(sendToastEl);

  firebase.auth()
    .onAuthStateChanged((user: { uid: string }): void => {
      if (user) {
        sendButton.onclick = (): void => {
          const textfieldInputs = $$('.mdc-text-field__input');
          const empty = [].filter.call(textfieldInputs, textfieldInput => textfieldInput.value === '');

          if (!empty.length) {
            firebase.firestore()
              .collection('users')
              .add({ id: user.uid, name: name.value, email: email.value, message: comment.value })
              .catch(error => console.error(`Error adding document: ${error}`));

            [].forEach.call(
              textfieldInputs,

page('/admin', (): void => {
    $('#app-root').innerHTML = _(template, { imports: { style } })();

    const adminEmail = $('#admin-email');
    const adminPassword = $('#admin-password');
    const adminSignIn = $('#admin-sign-in');
    const adminSignOut = $('#admin-sign-out');

    const signOutContent = $('#sign-out-content');
    const signInContent = $$('[data-sign-in]');

    const loginToastEl = $('#login-toast');
    const loginToast = new MDCSnackbar(loginToastEl);

    adminSignIn.onclick = (): void => {
      firebase.auth()
        .signInWithEmailAndPassword(adminEmail.value, adminPassword.value)
        .then(() => {
          [].forEach.call(
            $$('.mdc-text-field__input'),
            (textfieldInput) => { textfieldInput.value = ''; },
          );

          [].forEach.call(
            $$('.mdc-text-field__label'),
            textfieldLabel => textfieldLabel.classList.remove('mdc-text-field__label--float-above'),
          );
        })
        .catch((error) => {

installed() {

    const snackbar = new MDCSnackbar(this.shadowRoot.querySelector('.mdc-snackbar'))

    snackbar.listen('MDCSnackbar:opened', () => {
      this.fire('opened')
    })

    snackbar.listen('MDCSnackbar:closed', () => {
      this.fire('closed')

			//直接改掉下次需要 diff 的 attr, html 模式下初始化没有这个属性？？
      this['__omiattr_'] && (this['__omiattr_'].show = false)

    })

    this.snackbar = snackbar
    if (this.props.show) {
      this.snackbar.open()

getMDCSnackbar_(parent, template) {
    const parentMDCMap = getParentMap(template);
    const parentEl = parent[0] || parent;

    if (!parentMDCMap.has(parentEl)) {
      const $element = angular.element(template);

      parentEl.appendChild($element[0]);

      const snackbar = new MDCSnackbar($element[0]);
      parentMDCMap.set(parentEl, snackbar);

      $element.on('$destroy', () => {
        parentMDCMap.delete(parentEl);
        snackbar.destroy();
      });
    }

    return parentMDCMap.get(parentEl);
  }

onBeforeFlow() {
        const snackbarElement = this.querySelector('.mdc-snackbar');
        if (snackbarElement) {
            this.snackbarInstance = new MDCSnackbar(snackbarElement);

        }
    }
}

mounted() {
        this.mdcSnackbar = new MDCSnackbar(this.$el);
        this.mdcSnackbar.dismissesOnAction = this.dismissesOnAction
    },
    destroyed() {