Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simplified way to register Custom Elements
var DOMClass = (function (O,o) {
/*! (C) Andrea Giammarchi */
var
create = O.create,
css = create(null),
dP = O.defineProperty,
gOPD = O.getOwnPropertyDescriptor,
gOPN = O.getOwnPropertyNames,
gOPS = O.getOwnPropertySymbols,
ownKeys = gOPS ?
function (object) {
return gOPN(object).concat(gOPS(object));
} :
gOPN,
loadCSS = function (document, href) {
var
head = document.head,
link = document.createElement('link')
;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = href;
css[href] = head.insertBefore(link, head.lastChild);
}
;
return function DOMClass(description) {
for (var
k, name, xtends,
constructor,
stylesheet,
descriptors = {},
keys = ownKeys(description),
set = function (s) {
dP(descriptors, s, {
enumerable: true,
writable: true,
value: gOPD(description, k)
});
},
i = 0; i < keys.length; i++
) {
k = keys[i];
switch (k.toLowerCase()) {
case 'name': name = description[k]; break;
case 'stylesheet': stylesheet = description[k]; break;
case 'extends':
xtends = typeof description[k] === 'function' ?
description[k].prototype : description[k];
break;
case 'constructor': constructor = description[k];
set('createdCallback'); break;
case 'onattached': set('attachedCallback'); break;
case 'onchanged': set('attributeChangedCallback'); break;
case 'ondetached': set('detachedCallback'); break;
default: set(k); break;
}
}
if (stylesheet) {
descriptors.createdCallback.value = function () {
if (!(stylesheet in css))
loadCSS(this.ownerDocument || document, stylesheet);
if (constructor) constructor.apply(this, arguments);
};
}
return document.registerElement(
name || ('zero-dom-class-'+ ++o),
{prototype: create(xtends || HTMLElement.prototype, descriptors)}
);
};
}(Object, 0));
@WebReflection

This comment has been minimized.

Copy link
Owner Author

commented Feb 12, 2016

Basic usage example.

var MyComponent = DOMClass({
  // optional, generated at runtime otherwise
  name: 'my-component',
  // optional, it lazy-loads only when the first <my-component> is created
  styleSheet: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
  // optional, you can extend user defined components (natives too via DOMClass)
  extends: MyPreviousComponent,
  // alias for createdCallback
  constructor: function () {
    console.log('created', arguments);
  },
  // alias for other not-so friendly standard methods
  onAttached: function () {
    console.log('attached', arguments);
  },
  onDetached: function () {
    console.log('detached', arguments);
  },
  onChanged: function () {
    console.log('attribute changed', arguments);
  }
});

document.body.appendChild(new MyComponent).textContent = 'hello world';

Full DOMClass Features

The original utility which is capable of doing way more than above snippet is here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.