DOM and DOMElement

This page describes creating and working with DOM trees in Live Elements. To practice or play around with some of these concepts you can create a quick setup from the quick start tutorial. In the shortest way possible, create a new folder and install live-elements-web-cli:

mkdir lvplayground
cd lvplayground
npm i live-elements-web-cli # if not installed globally
npx lvweb init
npm i
lvweb serve

You can test these samples inside the app/Home.lv file:

import live-web.dom
import live-elements-web-server.view

component Home < PageView{

    head: PageProperties{
        title: "Live Elements"
        StyleLink{ href: '/styles/style.css' }
    }

    Div{ glid: 'playground'
    }
}

1. DOMElement

The DOMElement is the base class for all DOM objects. It's part of the live-web.dom module together with all the DOM components. All DOM components generate an html tag corresponding to their name. For example, the H1 is a DOMElement that generates an <h1> tag:

H1{} // will generate <h1></h1>

The only exception is the T element, which stands for a text node, and is mostly used with it's string based constructor:

H1{ T`H1 Text` }

1.1. DOMElement properties

These are all the properties used by the DOMElemeent:

• glid
• classes
• props
• style
• children
• dom

1.1.1 glid

The glid property is the global id for an element in an html page. This is not to be confused with the id property used by elements internally to identify objects locally. The glid property is equal to the actual id property given to a document object

H1{
    id: h1LocalId
    glid: 'h1GlobalId'
}

This will output <h1 id=globalId>, and the id property will be ignored on the html side.

1.1.2 classes

The classes property is an array of classes assigned to the html dom element:

P{
    classes: ['class1', 'class2', 'class3']
}

This will output:

<p class="class1 class2 class3"/>

1.1.3 style

The style property sets the style of the Element:

P{
    style = {
        margin: '20px 10px',
        border: '1px solid #ccc'
    }
}

The Style object (available from live-web.style) can also be used for styling with property bindings:

P{
    style: Style{
        string margin: '20px 10px'
        string border: '1px solid #ccc'
    }
}

1.1.4 props

The props property holds all the attributes assigned to the html dom element, besides the id, class and style attributes:

P{
    props = {
        tabindex: 0,
        title: 'p title'
    }
}

Will output:

<p tabindex=0 title="p title"></p>

Further nesting of objects inside the props property will flatten them using the dash notation:

P{
    props = {
        data: {
            a: 1,
            b: { c: 1 }
        }
    }
}

<p data-a=1 data-b-c=1></p>

1.1.5 children

Children assigned to the DOMElement will be assigned as DOM children:

Ul{
    Li{ T`Item 1` }
    Li{ T`Item 2` }
    Li{ T`Item 3` }
}

Will generate:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

1.1.6 dom

The dom property holds a reference to the actual DOM object that was generated. It's important to note that the dom object will not always be available, or can change, depending on when the dom gets rendered or generated.

H1{
    on domChanged: () => {
        console.log("New DOM object avialable: " + this.dom)
    }

    T`H1 Text`
}

1.2. Text based contructors:

Some DOM components have string based constructors, so it makes them easier to write:

H1{
    T`Heading`
}
P{
    T`Text`
}

Can be shortened to:

H1`Heading`
P`Paragraph`

1.3. Custom DOM component. Custom tags

You can create your own DOM component, that will generate a custom tag, by inheriting from DOMElement, and calling the constructor with the tag name:

component MyCustomTag < DOMElement{
    constructor(){
        super('mycustomtag')
        this{}
    }
}

MyCustomTag{} will generate <mycustomtag/>

1.4. Events and listeners

Just like registering listeners for any Live Elements component, we use the on keyword:

Button{
    on click: (event) => {
        console.log("Button clicked:", event)
    }
}

All html events are available and can be registerd using listeners as above.

1.5. Advanced Styling

Using the Style object we can create custom style properties by specifying a conversion function:

import live-web.dom
import live-web.style

Div{
    style: Style{
        convert = {
            'pixelWidth': (value) => { this.assign('width', value + 'px' ) },
            'pixelHeight': (value) => { this.assign('height', value + 'px') }
        }
        number pixelWidth: 200
        number pixelHeight: 30
    }
}

The above code converts pixelWidth and pixelHeight into the css width and height attributes. You can create custom Style components that allow for more powerful styling:

import live-web.dom
import live-web.style

component TextStyle < Style{
    string fontType: 'sans'
    convert = {
        'fontType': (value) => { 
            if ( value === 'sans '){
                this.assign('fontFamily', 'Arial' )
            } else if ( value === 'mono' ){
                this.assign('fontFamily', 'Courier New')
            }
        }
    }
}

P{ style: TextStyle{ fontType: 'normal' }
    T`Sans Text`
}
P{ style: TextStyle{ fontType: 'mono' }
    T`Mono Text`
}