Search code examples
polymerweb-component

Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'paper-button'

I'm using polymer 1.2.1 I'm trying to create two polymer elements paper-button & paper-input.

I had imported following in head

    <script src="third-party/js/bower/webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="third-party/html/bower/polymer/polymer.html">
    <link rel="import" href="third-party/html/bower/paper-button/paper-button.html">
    <link rel="import" href="third-party/html/bower/paper-input/paper-input.html">

and added following in body

    <paper-button>Flat button</paper-button>
    <paper-button raised>Raised button</paper-button>
    <paper-button noink>No ripple effect</paper-button>
    <paper-button toggles>Toggle-able button</paper-button>

    <paper-input label="total">
        <div prefix>$</div>
        <paper-icon-button suffix icon="clear"></paper-icon-button>
    </paper-input>

    <script>
        Polymer({
            is: "paper-button",
            // add a callback to the element's prototype
            created: function() {
                console.log("inside pol1");
                this.textContent = "I'm a proto-element!"
            }
        });
        Polymer({
            is: "paper-input",
            // add a callback to the element's prototype
            created: function() {
                console.log("inside pol2");
                this.textContent = "I'm a proto-elemente2!"
            }
        });
    </script>

I'm expecting a change in text of respective elements with some console but none of these happens. I get an error saying

"Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'paper-button'. A type with that name is already registered."

Solution

  • I'm not quite sure what you are trying to achieve, but the answer to your question is this:

    Your paper-input and paper-button have already been registered into Polymer by your <link rel="import"> tags in your <head> section, so naturally when you try to re-register them using Polymer({is:"paper-button"...}), it fails...

    I also wouldn't recommend overriding a packaged element's created() callback - if you want to do your own custom tasks, create a new custom element that wraps your target element, and then call your new element instead.