Compare custom element implementations

Benchmark created by Long on November 26, 2014

Preparation HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/0.1.2/document-register-element.js"></script>

var MyButtonPrototype = Object.create(HTMLButtonElement.prototype, {
    createdCallback: {
        value: function() {
            this.myProperty = "test";
        }
    },
    attachedCallback: {
        value: function() {
            console.log('attachedCallback:live on DOM ;-) ');
        }
    },
    detachedCallback: {
        value: function() {
            console.log('detachedCallback: leaving the DOM :-( )');
        }
    },
    attributeChangedCallback: {
        value: function(name, previousValue, value) {
    console.log(name, ' changed from ', previousValue, ' to ', value);
        }
    }
});

var MyButton = document.registerElement('my-button', {
    prototype: MyButtonPrototype,
    extends: 'button'
});

<polymer-element name="polymer-hello">
  <template>
      Hello <span id='p'>{{name}}</span> <content></content>!
  </template>
  <script>
    Polymer('polymer-hello', {
      name: 'LeLong'
    });
  </script>
</polymer-element>

Test runner

var node = document.body.appendChild(document.createElement('div'));
node.innerHTML = '<my-button>random text</my-button>';

var node = document.body.appendChild(document.createElement('div'));
node.innerHTML = '<polymer-hello></polymer-hello>';

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Long on November 26, 2014