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>
ObiHill
  • 11,448
  • 20
  • 86
  • 135

2 Answers2

3

Because your custom element names are valid (contain a "dash" - character), you would only need to register them with xtag.register() if you need to add functionality, attributes, default content, shadow DOM, etc. Elements with unrecognized but valid names will simply be HTMLElement objects. Elements with unrecognized and invalid names will be HTMLUnknownElement objects.

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

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

You can read the WHATWG Spec for HTMLUnknownElement here.

I don't know of any way to force element hierarchy. Standard HTML elements don't enforce this. For example, you can do <li><ul></ul></li> and <source><video></source>. The elements simply don't function when used improperly like this.

jpec
  • 450
  • 4
  • 9
  • Thanks. I updated the question as it probably wasn't clear what I was referring to by x-tag. Regarding the *forceful* compliance, I want to `console.warn` when the sub-element is being used improperly. However, I think I can implement functionality to do this inside x-tag. – ObiHill Dec 30 '16 at 17:02
  • 1
    @ObinwanneHill You could look at the `tagName` of the `parentNode` in the `inserted` lifecycle function, and do a `console.warn()` if it's not what you expect: xtag.register('custom-child', { lifecycle: { inserted() { if ('custom-parent' !== this.parentNode.tagName.toLowerCase()) console.warn(' should be child of ') } } }) – jpec Dec 30 '16 at 21:35
  • Yeah, that's exactly what I was thinking. Thanks. – ObiHill Dec 30 '16 at 23:19
1

You cannot register 3 different custom elements with the same prototype.

So you'll need to create 3 different prototypes, for example with Object.create():

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

Then call regsiter() method.

Regarding your second question, you'll need to control yourself the content of your custom element, when the element is created of attached.

Supersharp
  • 29,002
  • 9
  • 92
  • 134
  • I was referring to the [x-tag](http://x-tag.github.io/) web component library (see update). I'm not quite sure how your answer fits into that. – ObiHill Dec 30 '16 at 16:56