如何扩展现有的自定义元素？ [英] How to extend an existing custom element?

问题描述

我有一个自定义元素，名为 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'
}）; 
  

解决方案

根据 spec ，这是不允许的。
从spec：
如果BASE不存在或者是一个自定义元素的接口，请将ERROR
设置为InvalidName并停止。

来源：正如在Chrome中实现自定义元素的人员所描述的那样
https://lists.w3.org/Archives/Public/public-webapps/2014OctDec/0155.html

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'
    });

解决方案

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

这篇关于如何扩展现有的自定义元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！