Search code examples
javascriptgoogle-chromex-tag

Is the `extends` property deprecated in X-Tag?

The use-case for the extends property seems very straight-forward (http://www.x-tags.org/docs#custom-tag-registration-extends), however testing with the following, tag definition:

(function () {
    xtag.register('dk-foo', {
        extends: 'b',
        lifecycle: {
            created: function () {
                this.innerHTML = '*FOO*';
            }
        }
    });
}());

and markup:

<dk-foo>Hello BAR</dk-foo>

there doesn't seem to be any effect (i.e. the text is not bold), and worse, it breaks on Chrome.

I've tested IE11, FF28, Safari 5.1.17, and Chrome 33/35. Every browser, except Chrome, runs code in lifecycle.created (i.e. changes the text to *FOO*). If I remove the extends property it runs on Chrome as well.

I haven't been able to find any more documentation on extends than the documentation above, nor any tags that uses it (although I certainly haven't looked at all of them...).

Am I perhaps just using the extends property incorrectly..?

Solution

  • Per this comment:

    When you extend an element, you need to use the is="" syntax in your markup: . The is="" attribute is part of the standard, it's the only way to create custom elements from native elements.

    I tried it and you actually need is= and the extends. I don't like the is= so I'm actually just creating an inner element, in your case, an inner b.