Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I have error document.registerElement underfined

JavaScript runtime error: Object doesn't support property or method 'registerElement'

in File: ... bower_components\polymer\polymer.js Line 11701

  document.registerElement('polymer-element', {prototype: prototype});

My Bower:

{
  "name": "Polymer",
  "version": "0.0.0",
  "main": "main",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "polymer": "Polymer/polymer#~0.5.2",
    "core-icons": "Polymer/core-icons#~0.5.2",
    "core-elements": "Polymer/core-elements#~0.5.2",
    "paper-elements": "Polymer/paper-elements#~0.5.2"
  }
}

And my page:

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="/client/polymer-0.5.2/bower_components/polymer/polymer.html">
</head>
<body>
    <!-- render data set -->
  <template id="auto-bind-demo" is="auto-binding" repeat="{{quotes}}">
    <div on-tap="{{quoteClicked}}">
      <h3>{{quote}}</h3>
      - <em>{{attribution}}</em>
    </div>
  </template>

  <script>
    var t = document.querySelector('#auto-bind-demo');
    t.quoteClicked = function() {
      alert('Quote clicked!');
    };
    t.quotes = [{ 
      attribution: 'Plautus', 
      quote: 'Let deeds match words.'
    }, { 
      attribution: 'Groucho Marx',
      quote: 'Time flies like an arrow. Fruit flies like a banana.'
    }];
  </script>
</body>
</html>

What's wrong? I took this from the example in the documentation. Here https://www.polymer-project.org/docs/polymer/databinding-advanced.html#autobinding

PS: Browser IE11

like image 203
nim Avatar asked Jan 03 '15 03:01

nim


People also ask

What does document registerelement () method do?

The document.registerElement () method registers a new custom element in the browser and returns a constructor for the new element. Note: This is an experimental technology. The browser you use it in must support Web Components.

How do I register a new custom element?

The document.registerElement () method registers a new custom element in the browser and returns a constructor for the new element. Note: This is an experimental technology. The browser you use it in must support Web Components. See Enabling Web Components in Firefox.

How do I create a Mytag element in the document?

The Mytag variable holds a constructor that you can use to create a my-tag element in the document as follows: This inserts an empty my-tag element that will be visible if you use the browser's developer tools. It will not be visible if you use the browser's view source capability.


1 Answers

Currently only Chrome and other blink-based browsers support Custom Elements. Firefox supports but not enabled by defualt.

See Can I Use for a full supporting chart.

If you are using it on other browsers, you need to include a Web Components polyfill (usually a file named webcomponents.js).

like image 67
Leo Avatar answered Oct 13 '22 04:10

Leo