1

したがって、 x-tag Web コンポーネント ライブラリを使用すると、次のような HTML に表示されるカスタム要素を作成できることがわかります。

<x-my-custom-element>my content</x-my-custom-element>

ただし、次のように複数のカスタム サブ要素を作成したい場合はどうすればよいでしょうか。

<x-my-custom-element>
    <x-my-custom-element-child>
        <x-my-custom-element-grandchild></x-my-custom-element-grandchild>
    </x-my-custom-element-child>
</x-my-custom-element>

xtag.register()次のように、単純に3 回呼び出すのが正しい方法です。

xtag.register('x-my-custom-element', {...});
xtag.register('x-my-custom-element-child', {...});
xtag.register('x-my-custom-element-grandchild', {...});

また、サブ要素を常に別の要素の子にする方法はありますか? 言い換えれば、これはうまくいくでしょう：

<x-my-custom-element-parent>
    <x-my-custom-element-child></x-my-custom-element-child>
</x-my-custom-element-parent>

しかし、これはそうではありません:

<x-my-custom-element-child>
    <x-my-custom-element-parent></x-my-custom-element-parent>
</x-my-custom-element-child>
4

2 に答える 2

3

カスタム要素名は有効 (「ダッシュ」-文字を含む) でxtag.register()あるため、機能、属性、デフォルト コンテンツ、シャドウ DOM などを追加する必要がある場合にのみ、それらを登録する必要があります。認識されていないが有効な名前を持つ要素は、単にHTMLElementオブジェクト。認識されない無効な名前を持つ要素はHTMLUnknownElementオブジェクトになります。

// valid custom element name
document.createElement('foo-bar') instanceof HTMLElement; // true

// invalid custom element name
document.createElement('foobar') instanceof HTMLUnknownElement; // true

ここで、HTMLUnknownElementの WHATWG 仕様を読むことができます。

要素の階層を強制する方法がわかりません。標準の HTML 要素はこれを強制しません。たとえば、次のことができ<li><ul></ul></li>ます<source><video></source>。このように不適切に使用すると、要素は単に機能しません。

于 2016-12-30T15:51:28.190 に答える
1

同じプロトタイプに 3 つの異なるカスタム要素を登録することはできません。

したがって、たとえば次のように、3 つの異なるプロトタイプを作成する必要がありますObject.create()。

protoChild = Object.create( protoParent )
protoGrandchild = Object.create( protoChild )

次にメソッドを呼び出しますregsiter()。

2 番目の質問については、カスタム要素の内容を自分で制御する必要があります。これは、要素が attach で作成されたときに行われます。

于 2016-12-30T11:28:08.783 に答える