Правильный способ создания пользовательских подэлементов с помощью X-Tag

Question

Итак, я знаю, что библиотека веб-компонентов x-tag позволяет создавать пользовательские элементы, которые отображаются в 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() три раза, вот так:

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>

Answer 1

Потому что ваши собственные имена элементов являются допустимыми (содержат "тире" - характер), вам нужно всего лишь зарегистрировать их 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

Вы можете прочитать WHATWG Spec для HTMLUnknownElement здесь.

Я не знаю ни одного способа заставить иерархию элементов. Стандартные элементы HTML не обеспечивают этого. Например, вы можете сделать <li><ul></ul></li> а также <source><video></source>, Элементы просто не работают при неправильном использовании.

Answer 2

Вы не можете зарегистрировать 3 разных пользовательских элемента с одним и тем же прототипом.

Таким образом, вам нужно создать 3 разных прототипа, например, с Object.create():

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

Тогда позвони regsiter() метод.

Что касается вашего второго вопроса, вам нужно будет самостоятельно контролировать содержимое вашего пользовательского элемента, когда элемент создается из прикрепленного.