だから私は<a href="http://x-tag.github.io/" rel="nofollow noreferrer">x-tag web component library</a>は、あなたがこのようにHTMLで表示されるカスタム要素を作成できます知っているX-タグ

Question

でカスタムサブ要素を作成するための正しい方法：

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

しかし、私は複数のカスタムを作成したい場合にはどのような

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

0：

<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回を呼び出すための正しい方法です。このようなサブ要素、

また、別の要素の子であるサブ要素を強制的に使用する方法はありますか？言い換えれば、これは動作します：

<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> 

Answer 1

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

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

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

WHATWG Spec for HTMLUnknownElement hereを読むことができます。

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

Answer 2

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

だからObject.create()で、たとえば、3種類のプロトタイプを作成する必要があります：

は

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

次にregsiter()メソッドを呼び出します。あなたの2番目の質問については

、あなたは要素ががを添付のを作成したときに、自分でカスタム要素の内容を制御する必要があります。