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

dman777 · 2015-07-26T02:41:48Z

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.

The text was updated successfully, but these errors were encountered:

kevinpschaaf · 2015-07-27T17:54:15Z

@sorvell please take a look.

sorvell · 2015-07-27T19:54:31Z

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 · 2015-07-28T03:14:41Z

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>

Fixes #2154: ensure Polymer.dom always sees wrapped nodes when Shadow…

kevinpschaaf added the p1 label Jul 27, 2015

kevinpschaaf assigned sorvell Jul 27, 2015

sorvell added pending-response and removed p1 labels Jul 27, 2015

sorvell added p1 and removed pending-response labels Jul 30, 2015

sorvell closed this as completed in fc90aa0 Jul 30, 2015

kevinpschaaf added a commit that referenced this issue Jul 30, 2015

Merge pull request #2170 from Polymer/fix-2154

b87e773

Fixes #2154: ensure Polymer.dom always sees wrapped nodes when Shadow…

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

dman777 commented Jul 26, 2015

kevinpschaaf commented Jul 27, 2015

sorvell commented Jul 27, 2015

dman777 commented Jul 28, 2015

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

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

Comments

dman777 commented Jul 26, 2015

kevinpschaaf commented Jul 27, 2015

sorvell commented Jul 27, 2015

dman777 commented Jul 28, 2015