Question

我有一个名为x-foo的自定义元素。我想扩展它，并创建一个x-bar元素：

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

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

Uncaught NotSupportedError：无法执行'registerElement' '文档'：'x-foo-extended'类型的注册失败。标签 'extends'中指定的名称是自定义元素名称。 使用继承代替

使用继承代替？好的，怎么样？ 任何示例？

注意：我没有使用Polymer。只是Chrome中的普通香草网络组件，没有填充物。

Answer 1

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <title></title>
</head>
<body>
  <h1>Custom Element Inheritance</h1>
	<nav>
		<button onclick="addFoo()">Add Foo</button>
		<button onclick="addBar()">Add Bar</button>
	</nav>
	<script>

		//x-foo
		var xFooProto = Object.create( HTMLDivElement.prototype )
		xFooProto.createdCallback = function ()
		{
			this.innerHTML = "XFoo Custom Element"
		}
		var xFoo = document.registerElement( "x-foo", { prototype: xFooProto, extends: "div" } )

		function addFoo()
		{
			console.log( "addFoo()" )
			var xf = new xFoo
			document.body.appendChild( xf )
		}

		//x-bar
		xBarProto = Object.create( xFooProto )
		xBarProto.attachedCallback = function ()
		{
			this.innerHTML = "XBar Custom Element inherits from " + this.innerHTML
		}
		var xBar = document.registerElement( "x-bar", { prototype: xBarProto, extends: "div" } )

		function addBar()
		{
			console.log( "addBar()" )
			var xb = new xBar
			document.body.appendChild( xb )
		}
	</script>
</body>
</html>

您只能扩展标准HTML元素的受限子集，而不是自定义元素。你必须：

1）获取x-foo原型（我猜是xFooProto）。

2）继承它：

var xBarProto = Object.create( xFooProto )

3）用它的特定方法和属性来增强它。

4）将其注册为原始x-foo基本元素的扩展名：

document.registerElement( "x-bar", { prototype: xBarProto, extends: "div" } )

如何扩展自定义元素（“香草”网络组件，没有聚合物）

1 个答案: