2

というカスタム要素がありx-fooます。x-bar私はそれを拡張し、要素を作成したいと思います:

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

しかし、うまくいきません。この方法でカスタム要素を拡張することはできません。Chrome では次のエラーが発生します。

Uncaught NotSupportedError: 「ドキュメント」で「registerElement」を実行できませんでした: タイプ「x-foo-extended」の登録に失敗しました。「extends」で指定するタグ名はカスタム要素名です。代わりに継承を使用してください。

代わりに継承を使用しますか? わかりました、正確にはどうですか？例はありますか？

注: 私はポリマーを使用していません。ポリフィルのない、Chrome の単純なバニラ Web コンポーネント。

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) 特定のメソッドとプロパティで拡張します。

x-foo4) 元の基本要素の拡張として登録します。

document.registerElement( "x-bar", { prototype: xBarProto, extends: "div" } )
于 2015-08-27T10:53:06.580 に答える