How to extend an existing custom element?

问题

I have a custom element, called x-foo. I would like to extend it, and create an x-foo-extended element, but it doesn't works. I get this error:

Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'x-foo-extended'. The tag name specified in 'extends' is a custom element name. Use inheritance instead.

    var xFooExtendedProto = Object.create(xFoo.prototype);

    xFooExtendedProto.someCustomFunc = function() {
        // ...
    };

    xFooExtended = document.registerElement('x-foo-extended', {
        prototype: xFooExtendedProto,
        extends: 'x-foo'
    });

回答1:

According to the spec , this is not permitted. From the spec: "If BASE does not exist or is an interface for a custom element, set ERROR to InvalidName and stop."

Source: As described by the person who implemented custom elements in Chrome https://lists.w3.org/Archives/Public/public-webapps/2014OctDec/0155.html

来源：https://stackoverflow.com/questions/27769119/how-to-extend-an-existing-custom-element