Default namespaces

Default namespaces HTML, XML or SVG

Jilex create some global namespaces for HTML, XML, SVG classes by default for you to use or extend. It's native classes copies in globals objects named lowercase:

• html
• xml
• svg

On Jilex core boot, the window object is introspected to find functions that match name "HTMLElement" or "SVGElement".

• html.Button
• html.Ul
• html.Section
• html.Document
• xml.Document
• svg.Document
• svg.Rect
• svg.Path

Because HTML is case insensitive, the nodes that are in HTML namespace (http://www.w3.org/1999/xhtml) have localNames written lowercase. So the classe names are also accessible lowercase:

• html.li
• html.button
• html.input
• html.nav
• html.title

You can instanciate these classe against using document.createElement method:

let myList = new html.Ul();
myList.appendChild( new html.Li() );

or you can inherit from these classes to create your own components:

class MyComp extends html.Div {
	
	constructor()
	{
		return new Element('MyComp').extends( MyComp )
	}
	MyComp( label )
	{
		this.createChildren();
		this.label = label;
	}
	createChildren()
	{
		this._label = new html.Span();
		this.appendChild( this._label );
	}
	
	get label()
	{
		return this._label.innerText;
	}
	set label( v )
	{
		this._label.innerText = v;
	}
}

let foo;
document.body.appendChild( foo = new MyComp( 'Coucou!' ) );

... later

foo.label = 'Coucou monde!';

or use it directly in xHTML:

<local:MyComp label="{ LANG == 'fr_FR' ? 'Coucou' : 'Hello' } {person.name}!"/>

@see Element, Custom components