.customElement(
classes: String? = null,
block: CUSTOM.() -> Unit = {}
): T {
return CUSTOM(
attributesMapOf("class", classes),
this
).visitAndFinalize(this, block)
}
// Usage
val html = createHTML(prettyPrint = false).div {
customElement(classes = "widget") {
customAttr = "my-value"
span { +
```
```kotlin
Content inside custom element"
}
}
// Output: Content inside custom element
```
--------------------------------
### Measure HTML Generation Time
Source: https://context7.com/kotlin/kotlinx.html/llms.txt
Measure the performance of HTML generation using the measureTime interceptor. This helps in identifying performance bottlenecks in complex HTML structures.
```kotlin
import kotlinx.html.*
import kotlinx.html.stream.*
import kotlinx.html.consumers.*
// Measure generation time
System.out.appendHTML().measureTime().html {
head {
title("Performance Test")
}
body {
repeat(1000) { i ->
div { +
```
```kotlin
"Item $i"
}
}
}.let { result ->
println()
println("Generated in ${result.time} ms")
}
```
--------------------------------
### Setting Element Attributes in Kotlin HTML DSL
Source: https://context7.com/kotlin/kotlinx.html/llms.txt
Shows how to set standard HTML attributes as properties and custom data attributes using the `attributes` map. Utilizes type-safe enum constants for predefined attributes.
```kotlin
import kotlinx.html.*
import kotlinx.html.stream.createHTML
val html = createHTML(prettyPrint = false).div {
// Standard attributes as properties
a {
href = "https://example.com"
target = ATarget.blank // Type-safe constant
rel = "noopener noreferrer"
+("External Link")
}
// Image with attributes
img {
src = "/images/photo.jpg"
alt = "Photo description"
width = "300"
height = "200"
}
// Form with enum attributes
form {
action = "/submit"
method = FormMethod.post
encType = FormEncType.multipartFormData
input {
type = InputType.text
name = "username"
placeholder = "Enter username"
required = true
}
}
// Custom data attributes
div {
id = "myElement"
attributes["data-toggle"] = "modal"
attributes["data-target"] = "#myModal"
attributes["aria-expanded"] = "false"
+("Click me")
}
}
```
--------------------------------
### Apply CSS Classes During Element Creation
Source: https://github.com/kotlin/kotlinx.html/wiki/Elements-CSS-classes
Use the optional 'classes' argument in element builder functions to set a space-separated string of CSS classes when creating an element.
```kotlin
div(classes = "container left tree") {
}
```
--------------------------------
### Measure HTML Generation Time
Source: https://github.com/kotlin/kotlinx.html/wiki/Interceptors
Utilize the measureTime interceptor to record the time taken for HTML generation. This is useful for performance analysis.
```kotlin
System.out.appendHTML().measureTime().html {
head {
title("Welcome page")
}
body {
div {
+("<<>>")
}
div {
CDATA("Here is my content")
}
}
}.let {
println()
println("Generated in ${it.time} ms")
}
```
--------------------------------
### Append a DIV to an Existing Element with kotlinx.html
Source: https://github.com/kotlin/kotlinx.html/wiki/DOM-trees
Use the `append` function to add a newly created DOM tree as a child to an existing node. This is useful for dynamically updating the UI.
```kotlin
fun appendTab(containerDiv: HTMLDivElement) {
containerDiv.append.div {
p { +"tab" }
div {
//...
}
}
}
```
--------------------------------
### Append HTML within StringBuilder
Source: https://github.com/kotlin/kotlinx.html/wiki/Streaming
Demonstrates using appendHTML to generate HTML content directly within a StringBuilder lambda. Includes basic HTML structure with a link.
```kotlin
val text = buildString {
appendLine("")
appendHTML().html {
body {
a("http://kotlinlang.org") { +
"link"
}
}
}
appendLine()
}
```
--------------------------------
### Handle Click Event with Lambda in JS
Source: https://github.com/kotlin/kotlinx.html/wiki/Events
Use `onClickFunction` to specify a lambda for event handling in DOM mode for JS targets. Ensure `kotlinx.html.js.*` is imported. This property is only available in JS.
```kotlin
div {
onClickFunction = { event ->
window.alert("Kotlin!")
}
}
```
--------------------------------
### Registering Custom Tag on Root
Source: https://github.com/kotlin/kotlinx.html/wiki/Micro-templating-and-DSL-customizing
Extends `TagConsumer` to make the custom `CUSTOM` tag available for use at the root level of the HTML structure.
```kotlin
fun TagConsumer.custom(block: CUSTOM.() -> Unit = {}): T {
return CUSTOM(this).visitAndFinalize(this, block)
}
```
--------------------------------
### Extension Function for Dropdown
Source: https://github.com/kotlin/kotlinx.html/wiki/Micro-templating-and-DSL-customizing
Defines a top-level extension function `dropdown` for the `UL` tag to simplify the creation of dropdown list items.
```kotlin
fun UL.dropdown(block : LI.() -> Unit) {
li("dropdown") {
block()
}
}
```
--------------------------------
### Standard Input Field Declaration
Source: https://github.com/kotlin/kotlinx.html/wiki/Enum-attributes
Declare input fields using the `input` tag with explicit `type` and `name` attributes. This can become verbose with many fields.
```kotlin
form(action = "/form", encType = FormEncType.multipartFormData,
method = FormMethod.post) {
input(type = InputType.text, name = "field1")
input(type = InputType.text, name = "field2")
input(type = InputType.checkBox, name = "field3")
input(type = InputType.text, name = "field4")
input(type = InputType.file, name = "field5")
input(type = InputType.text, name = "field6")
}
```
--------------------------------
### Embed Raw CSS in Style Tag
Source: https://github.com/kotlin/kotlinx.html/wiki/Style-and-script-tags
Use `unsafe { raw { ... } }` to embed unescaped CSS content within a `