2

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

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

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

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

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

注意：我没有使用 Polymer。只是 Chrome 中的普通 web 组件，没有 polyfill。

4

1 回答 1

2 

<!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" } )
于 2015-08-27T10:53:06.580 回答