CODEWITHSUNDEEP
web-component
chriskohler
chriskohler

Reputation: 165

How to inherit from a custom element

Is it possible to inherit from a custom element.

I added a basic example of the x-foo custom element with a template and a shadow dom. Is it possible to create a new custom element called "x-superfoo" which inherits "x-superfoo"s functions and styles (and overwrites some styling, e.g. blue color)?

http://jsbin.com/hodoxo/1/edit

Upvotes: 1

Views: 174

Answers (1)

CletusW
CletusW

Reputation: 3980

Sure! Just use standard JS prototypical inheritance.

var XSuperFooProto = Object.create(XFooProto);

XSuperFooProto.createdCallback = function() {
  XFooProto.createdCallback.call(this);

  // Set up another shadow root...
};

document.registerElement('x-superfoo', {prototype: XSuperFooProto});

http://jsbin.com/hiwatidulivi/1/edit?html,js,output

Upvotes: 1

Related Questions