Javascript 如何扩展自定义元素（“香草”web组件，无聚合物）

我有一个自定义元素，名为

x-foo

。我想扩展它，并创建一个

x-bar

元素：

xBar = document.registerElement("x-bar", {
    prototype: xBarProto,
    extends: "x-foo"
});

但它不起作用。以这种方式扩展自定义元素是不可能的。Chrome发出以下错误：

未捕获的NotSupportedError:无法在上执行“registerElement” “文档”：类型“x-foo-extended”的注册失败。标签 “extends”中指定的名称是自定义元素名称使用继承 相反

改用继承？好的，具体怎么说有什么例子吗？

注意：我没有使用聚合物。只有镀铬的普通香草网组件，没有多填充物。

自定义元素继承
添加Foo
添加栏
//x-foo
var xFooProto=Object.create（htmldevelment.prototype）
xFooProto.createdCallback=函数（）
{
this.innerHTML=“XFoo自定义元素”
}
var xFoo=document.registereElement（“x-foo”，{prototype:xFooProto，extensed:“div”}）
函数addFoo（）
{
console.log（“addFoo（）”）
var xf=新xFoo
document.body.appendChild（xf）
}
//x-bar
xBarProto=Object.create（xFooProto）
xBarProto.attachedCallback=函数（）
{
this.innerHTML=“XBar自定义元素继承自”+this.innerHTML
}
var xBar=document.registereElement（“x-bar”，{prototype:xBarProto，extensed:“div”}）
函数addBar（）
{
console.log（“addBar（）”）
var xb=新的xBar
document.body.appendChild（xb）
}

xBarProto来自哪里？这似乎相当有限。HTML rocks设法做到了这一点，但现在我们在chrome中遇到了这个错误。发生了什么事。