TypeError: 'mozMatchesSelector' called on an object that does not implement interface Element.

[dman777]

Polymer 1.0

Not a issue in Chrome, only Linux Firefox 31.8.0.

Not sure if this is a Polymer issue or not, since the error is coming from webcomonents.js version 0.7.3:

In the console I see TypeError: 'mozMatchesSelector' called on an object that does not implement interface Element. which originates from code:

    var MatchesInterface = {
      matches: function(selector) {
        selector = shimMatchesSelector(selector);
        return scope.originalMatches.call(unsafeUnwrap(this), selector);
      }
    };

This happens when I click on:

        <template is="dom-bind" id="videoButtonClick">
          <div class="horizontal layout center" style="height: 100%">
            <div class="layout vertical center" style="width: 100%">
              <div id="play-button-container" class="horizontal center-center layout wrap">
                <div id="play-button-png" on-click="openVideo"></div>
                <h5>See and hear the story</h5>
              </div>
            </div>
          </div>
        </template>

which runs:

var app = document.querySelector('#videoButtonClick');
app.openVideo = function () {
    videoPlayer = Polymer.dom(document.rootElement).querySelector('video-player');
    videoPlayer.open();
};

Also, Polymer 1.0 loads/renders extremely slowly on Firefox.

[kevinpschaaf]

@sorvell please take a look.

[sorvell]

We'll need more information or a complete test case to help debug this issue. In particular, it's unclear on what you're clicking and what that's doing that's causing the error. What the video-player element does is probably relevant.

That said, this is the type of problem that can occur when using the Shadow DOM polyfill that is part of webcomponents.js. It's one of the reasons Polymer is not using this polyfill by default in 1.0. I recommend seeing if using the webcomponents-lite.js version of the webcomonents polyfills (which omits Shadow DOM) fixes the issue. This should also make performance on Firefox much better.

I also recommend upgrading to a more recent version of Firefox if possible. Polymer only officially supports evergreen browsers and the last 2 released versions.

[dman777]

Thank you for the recommendations, I will try that. Here is the other code you asked for. Please let me know if there is anything else you need.

<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" type="css" href="../bower_components/paper-dialog-behavior/paper-dialog-common.css">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">


<dom-module id="video-player">
  <style>
     :host {
      @apply(--layout-fit);
     }
  </style>



  <template>
    <template is="dom-if" if="{{show.video}}">
      <div class="layout vertical fit">
        <google-youtube style="height: 100%"
          video-id="YMWd7QnXY8E"
          rel="1"
          start="1"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>
      <template is="dom-if" if="{{show.backButton}}">
        <paper-button dialog-dismiss style="color: white; margin-top: 0px">
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </template>
    </template>
  </template>


  <script>
    Polymer({
      is: "video-player",
      behaviors: [ 
        Polymer.PaperDialogBehavior,
        Polymer.NeonAnimationRunnerBehavior
                 ],
      properties: {
        foo: { Object,
               notify: true
        },
        entryAnimation: {
          value: 'scale-up-animation'
        },
        exitAnimation: {
          value: 'fade-out-animation'
        }
      },
      listeners: { 'iron-overlay-opened': 'enableElement',
                   'iron-overlay-closed': 'stopPlayer'
      },
      timeWait: 300,
      startPlayer: function() {
        this.playAnimation('entry');
        this.show = { backButton: true};
        youtubePlayer = this.$$('google-youtube');
        if (youtubePlayer.playbackstarted) {
         youtubePlayer.play();
        }
      },
      enableElement: function(e) {
        this.show = { video: true};
        setTimeout(this.startPlayer.bind(this), this.timeWait);
      },
      stopPlayer: function(e) {
        this.timeWait = 0;
        this.playAnimation('exit');
        youtubePlayer = this.$$('google-youtube');
        youtubePlayer.pause();
        youtubePlayer.seekTo(1);
        this.show = { video: false,
                     backButton: false }
      },
      ready: function() {
        console.log("sssssssssssssssssSS");
       }
    });
  </script>
</dom-module>