1

Ok peep's I've recently been learning about custom elements ie: <x-foo>.

I found that they have lifecycle callbacks, a series of listeners that can be attached to the element in order to further process it relative to its' current stage ie:

  • Created
  • Attached
  • Detached
  • Attribute Changed

eg:

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {...};
proto.attachedCallback = function() {...};

var XFoo = document.registerElement('x-foo', {prototype: proto});

elm = new XFoo();
par.appendChild(elm);

My Question...

These callbacks seem to be specific to custom elements. So how do I achieve a similar result for standard/non-custom elements. ie:

var proto = HTMLDivElement.prototype;

proto.createdCallback = function() {...};
proto.attachedCallback = function() {...};

div = document.cerateElement('div');
par.appendChild(elm);
LostInCyberSpace
  • 413
  • 4
  • 19
  • Web Components browser support is also sketchy right now, so if this is for production code, consider using a MutationObserver to monitor changes to the DOM. – Palpatim Feb 18 '15 at 16:16
  • Possible duplicate of [When are MutationObserver callbacks fired?](http://stackoverflow.com/questions/14564617/when-are-mutationobserver-callbacks-fired) – Paul Sweatte Mar 04 '17 at 04:18

0 Answers0