Extending every html element

Question

With x-tag I am trying to find a way to extend every html element that I put is:"ajax-pop" attribute.

What I want to do is when I click an element with is:"ajax-pop" attribute I will do some dynamic ajax loads. It will be a good starting point for me to develop a manageble system.

I know I can do it with some different ways but I am wondering is there a way to do it like this way extends:'every single native html element'

xtag.register('ajax-pop', {

    extends: 'WHAT SHOULD I WRITE HERE???',

    lifecycle: {
        created: function () {                
        },
        inserted: function () {                
        },
        removed: function () { },
        attributeChanged: function () { }
    },
    methods: {
        someMethod: function () { }
    },
    accessors: {
        popUrp: {
            attribute: {
                name: "pop-url"
            }
        },
    },
    events: {
        tap: function () { },
        focus: function () { }
    }
});

Answer 1

Type extensions must be defined element by element. A single custom element cannot extend multiple standard elements. For, each custom element owns it own prototype, that can't be reused.

If you want to extend a button (for example), you have to write in JavaScript :

xtag.register('ajax-pop', {
    extends: 'button',
...

And, in the HTML page:

<button is="ajax-pop">
...

Answer 2

You can do this using x-tag's delegate pseudo, and by adding a data- attribute to elements you wish to have this behavior:

<article data-pop="/path/to/content.html"></article>

And your JavaScript would be something like this:

xtag.addEvent(document.body, 'tap:delegate([data-pop])', function (e) {
  var uri = this.getAttribute('data-pop');

  $.get(uri).done(function (res) {
    this.innerHTML = res;
  }.bind(this));
});

Here's a codepen example: http://codepen.io/jpecor-pmi/pen/Vexqyg

Answer 3

I believe you're going about using x-tag the wrong way. X-tag is meant to be used to implement entirely new tags; what you're trying to do is simply modify different pre-existing DOM elements. This can easily be done in pure javascript or more easily in jquery by assigning each desired element a shared class.