使用 X-Tag 创建自定义子元素的正确方法

Question

所以我知道 x-tag web component library 可以让您创建出现在 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

您不能使用相同的原型注册 3 个不同的自定义元素。

因此您需要创建 3 个不同的原型，例如 Object.create():

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

然后调用regsiter()方法。

关于你的第二个问题，当元素 created of attached[=23= 时，你需要自己控制自定义元素的内容].

Answer 2

因为您的自定义元素名称是有效的（包含 "dash" - 字符），如果您需要添加功能、属性、默认内容、阴影 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 for HTMLUnknownElement here。

我不知道有什么方法可以强制元素层次结构。标准 HTML 元素不强制执行此操作。例如，您可以执行 <li><ul></ul></li> 和 <source><video></source>。如果像这样使用不当，这些元素根本无法发挥作用。

使用 X-Tag 创建自定义子元素的正确方法

The right way to create custom sub-elements with X-Tag

html

javascript

web-component

x-tag