3

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

thebjorn
  • 26,297
  • 11
  • 96
  • 138

1 Answers1

4

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.

Community
  • 1
  • 1
Roy Truelove
  • 22,016
  • 18
  • 111
  • 153
  • Thanks for filing this. I'm getting the sense that extends is not going to save you any time/effort based on the latest comment on the bug: "It probably isn't testing anything you need it to at the moment, because while you *can* use an existing native element prototype as your base, none of its methods will work on the newly created `` element you make." – thebjorn Apr 25 '14 at 11:00