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 () { }
    }
});

Supersharp · Answer 1 · 2015-12-11T10:25:40.973

2

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

edited Dec 11 '15 at 10:25

answered Dec 11 '15 at 08:37

Supersharp

29,002
9
92
134

This is a solution when you need to extend – Bahtiyar Özdere Dec 11 '15 at 09:30
I am wondering if there is a base prototype (I know there is) and extending it :D :D – Bahtiyar Özdere Dec 11 '15 at 11:39
It's not the prototype you extend but the HTML element. And you cannot extend 2 different elements with the same cutom name. :-/. You'll have to provide a new custom name for each element you extend. – Supersharp Dec 11 '15 at 15:55
Yes I think I will use the old behaviour or I will just put some element that looks for others like jquery logic. – Bahtiyar Özdere Dec 11 '15 at 19:13

score 1 · Answer 2 · answered Jan 28 '16 at 22:51

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

score 0 · Answer 3 · answered Dec 10 '15 at 16:02

0

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.

answered Dec 10 '15 at 16:02

coltonb

66
7

I think x-tag, polymer and web component systems are not only about creating new tags. It' s about creating **maintainable and reuseble** components or extending them also. – Bahtiyar Özdere Dec 10 '15 at 17:34

Extending every html element

3 Answers3