You can use the code from the examples we used in the recipes of the previous chapter or you can start a new project.

An HTML element can be transformed by using the following steps:

When working on a Lift application, the data-lift attribute in an HTML tag will search for a snippet to do the job.

The text before the dot, Calculator, is the name of the snippet class or object and the text after the dot, plus, is the method that will be invoked.

In this example, we are telling Lift to invoke the Calculator object's plus method. Let's take a look at the plus method to see what it does.

The plus method has no parameters and its return type is CssSel.

The CssSel trait performs HTML transformations using CSS selectors. Its job is to get some HTML (scala.xml.NodeSeq), transform it, and then return the transformed HTML (a new NodeSeq).

Therefore, what is really happening here is that the plus method gets the content of the div tag and changes it.

When the plus method is invoked, it will search for the HTML tag that has id equal to "result", and change it by replacing the tag with result as the value of id, with the result of the evaluation of the expression 2 + 2.

You can see this by looking at the resulting HTML in your browser. The original snippet was:

<div data-lift="Calculator.plus">
  2 + 2 = <span id="result">some number</span>
</div>

It was then changed to:

<div>
  2 + 2 = <span id="result">4</span>
</div>

Another thing you'll notice, is that there is no mention of the snippet in the resulting HTML.