如何扩展现有的自定义元素？

Question

我有一个自定义元素，名为 x-foo。我想扩展它，并创建一个 x-foo-extended 元素，但它不起作用。我收到此错误：

未捕获的 NotSupportedError：无法在 'Document' 上执行 'registerElement'：类型 'x-foo-extended' 的注册失败。 'extends' 中指定的标签名称是自定义元素名称。请改用继承。

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

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

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

Answer 1

根据 spec ，这是不允许的。从规格： “如果 BASE 不存在或者是自定义元素的接口，则设置 ERROR 到 InvalidName 并停止。"

资料来源：如 Chrome 中实施自定义元素的人员所述 https://lists.w3.org/Archives/Public/public-webapps/2014OctDec/0155.html

如何扩展现有的自定义元素？

How to extend an existing custom element?

html

javascript

custom-element