x-tag / core

The Heart of X-Tag
http://x-tag.github.io/
Other
1.25k stars 151 forks source link

Extending existing elements using "is" attribute #111

Closed slavb18 closed 9 years ago

slavb18 commented 9 years ago

What do you think about implementing polymer-style of extending existing elements? Like https://www.polymer-project.org/platform/custom-elements.html

I can simulate this feature on events level like xtag.addEvent(document, 'submit:delegate(form[is=form-ajax])', function (event) {

(see https://github.com/opentags/form-ajax/blob/master/src/form-ajax.js)

But how about methods? Can bound method to an existing HTML element?

(And yes, ofc "is" attribute is not standard and does not passes HTML5 validation, but polymer people looks like ignore that. May be there can be validation-safe "data-is" attribute also)

csuwildcat commented 9 years ago

I'm really not sure what you're asking, but it looks like you are confused on a lot of points:

  1. This is how you define a custom element with X-Tag: http://x-tag.readme.io/v1.0/docs/getting-started
  2. The is="" attribute absolutely is a standard: http://w3c.github.io/webcomponents/spec/custom/#extensions-to-document-interface-to-register. When you want to create a custom element from an existing native element, you use is="x-some-name-here". If you just want to create a new element altogether, you just use the custom element name you choose as the tag name: <x-some-tag-name-here></x-some-tag-name-here>.
  3. In your example, all you are doing is setting some events on the document with X-Tag's addEvent method, this is majorly missing the boat on the entire point and feature set of X-Tag.

Read through those docs on readme.io that I linked to, then if you have further questions, you can ask for details.

csuwildcat commented 9 years ago

Just to give you a big first hint on how custom elements work, I've constructed a skeleton for an element based on your example:

    xtag.register('form-ajax', {
        extends: 'form',
        events: {
            'click:delegate(button[type=submit])': function(){ ... },
            'submit': function(){ ... }
        }
    });
slavb18 commented 9 years ago

thanks! may be http://www.x-tags.org/docs site should point to real docs