1

So I know the x-tag web component library enables you create custom elements that appear in HTML like this:

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

However, what if I wanted to create multiple custom sub-elements, like this:

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

Is the right way to simply call xtag.register() three times, like so:

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

Also, is there any way to force a sub-element to always be a child of another element? In other words, this would work:

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

but this wouldn't: 

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

2 回答 2

3

因为您的自定义元素名称是有效的（包含“破折号”-字符），如果您需要添加功能、属性、默认内容、影子 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

您可以在此处阅读 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()方法。

关于您的第二个问题，您需要自己控制自定义元素的内容，当元素创建时attach。

于 2016-12-30T11:28:08.783 回答