registerElement

document.registerElement shortcut

installation

npm install register-element

usage (ES2015)

import registerElement from 'register-element';

var MyElement = registerElement('my-element', {
  createdCallback () {
    alert('created!');
  },
  attachedCallback () {
    this.textContent = 'Hello!';
  }
});

document.body.appendChild(new MyElement());

extending element

var MyInput = registerElement('my-input', {
  createdCallback () {
    alert('created input');
  },
  attachedCallback () {
    this.placeholder = 'Hello!';
  }
}, HTMLInputElement, 'input');

document.body.appendChild(new MyInput());

usage (CommonJS)

var registerElement = require('register-element');

var MyElement = registerElement('my-element', {
  createdCallback () {
    alert('created!');
  },
  attachedCallback () {
    this.textContent = 'Hello!';
  }
});

document.body.appendChild(new MyElement());

usage (oldskool)

<script src="register-element.js"></script>
<script>
  import registerElement from 'register-element';

  var MyElement = registerElement('my-element', {
    createdCallback () {
      alert('created!');
    },
    attachedCallback () {
      this.textContent = 'Hello!';
    }
  });
  
  document.body.appendChild(new MyElement());
</script>