[webcomponents]: Custom HTML elements

If someone wants to use custom elements in HTML then is the
following possible in principle?

Let's assume that I want to use <checkbox>Label</checkbox> element.

1. Parsing:

When parsing document containing this the parser
creates DOM element with the tagName "checkbox".

The element is created as an instance of class:

interface CustomElement: Element {}

2. Script binding:

Script may register custom extenders - "classes" that extend default set of
methods/properties of native CustomElement implementation. For example:

document.behaviors["checkbox"] = {
    attached: function() { ...the behavior gets attached to the DOM element
                                   `this` here is the element ...  }
    mousedown: function(event) { ... }
    ...
    someMethod: function(params) { ... }
    get someProp: function() { ... }
    set someProp: function(val) { ... }
};

The initialization of document.behaviors collection should be made
presumably before onload/documentready DOM event.

2a.
Before generating onload/documentready event the UA shall
assign (extend) behaviors in document.behaviors collection
and call elem.attached() method (if any) passing the element
in 'this' envariable.

3. In principle this method:
  document.behaviors["checkbox"]
can accept not only tag names but selectors too. For example:

  document.behaviors["button[type=checkbox]"] = ...;

4.  Any DOM modifications (adding new elements, removing)
is made with respect of  the document.behaviors collection so
if new element with tag "checkbox" is created it gets attached()
call for it. In principle the attached() method plays role of constructor
in the behaviors realm.

It could be also detached() method that is invoked before DOM element
removal, kind of dtor in other words.

Does this sound feasible/reasonable to do in conventional UA?

--------------
Mentioned mechanism works in my Sciter engine pretty well.
The only difference is that instead of document.behaviors I am using
custom 'prototype' CSS property:

checkbox {
   display: inline-block;
   prototype: CheckBox url(code/controls.tis);
}

and if code/controls.tis script has declaration

class CheckBox: Behavior {
   function attached() {...}
   function mousedown() {...}
   property someProp(v) {...}
}

the element will get CheckBox prototype (class here).

(Sciter uses tis script[1])


[1] http://www.codeproject.com/Articles/33662/TIScript-language-a-gentle-extension-of-JavaScript


--
Andrew Fedoniouk.

http://terrainformatica.com

Received on Wednesday, 20 February 2013 05:00:52 UTC