The highest tagged major version is
README
¶
DOM Package
Location: /dom
GoWebComponents/
├── dom/ ← YOU ARE HERE
│ ├── doc.go
│ ├── dom.go
│ ├── event.go
│ └── html.go
├── hooks/
├── state/
├── render/
├── router/
├── fetch/
├── internal/
├── examples/
└── ...
Overview
The dom package provides a comprehensive API for creating and manipulating HTML elements in a type-safe, declarative way. It's the foundation for building user interfaces with GoWebComponents.
Key Components
Element Creation (dom.go)
CreateElement()- Factory function for creating virtual DOM elements- Element type definitions and attribute handling
- Virtual DOM node structure
HTML Element Constructors (html.go)
Over 80 HTML element functions including:
- Layout:
Div,Span,Section,Article,Header,Footer,Nav,Main,Aside - Text:
H1-H6,P,Blockquote,Pre,Code,Em,Strong,Small - Forms:
Form,Input,Textarea,Select,Option,Button,Label,Fieldset - Interactive:
A,Button,Details,Summary,Dialog - Media:
Img,Video,Audio,Canvas,Svg,Picture,Source - Tables:
Table,Thead,Tbody,Tfoot,Tr,Th,Td,Caption - Lists:
Ul,Ol,Li,Dl,Dt,Dd - Semantic:
Time,Mark,Progress,Meter,Data,Output
Event Handling (event.go)
GoEventstruct - Type-safe event wrapper- Event helper methods:
GetValue()- Extract input valuesIsChecked()- Get checkbox stateGetKey()- Keyboard event handlingPreventDefault()- Prevent default behaviorStopPropagation()- Stop event bubbling
Type Definitions
type Attrs = map[string]interface{} // Element attributes
type Element struct { // Virtual DOM element
Type string
Props Attrs
Children []interface{}
}
Usage Example
import (
"github.com/monstercameron/GoWebComponents/dom"
"syscall/js"
)
func MyComponent(props dom.Attrs) *dom.Element {
handleClick := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
println("Button clicked!")
return nil
})
return dom.Div(dom.Attrs{
"class": "container",
},
dom.H1(nil, dom.Text("Welcome")),
dom.P(dom.Attrs{
"class": "description",
}, dom.Text("This is a demo component")),
dom.Button(dom.Attrs{
"onclick": handleClick,
"class": "btn btn-primary",
}, dom.Text("Click Me")),
)
}
Related Packages
- /render - Uses this package to render elements to actual DOM
- /hooks - Provides hooks that work with DOM elements
- /examples - See practical usage in example applications
Documentation
See doc.go for the official Go package documentation.
Documentation
¶
Overview ¶
Package dom provides HTML element constructors and DOM manipulation utilities for GoWebComponents.
This package offers a type-safe way to create HTML elements programmatically in Go, with automatic conversion of children and optimized performance through element pooling and smart string handling.
Basic usage:
import "github.com/monstercameron/GoWebComponents/dom"
// Create simple elements
element := dom.Div(nil,
dom.H1(nil, "Hello World"),
dom.P(nil, "Welcome to GoWebComponents"),
)
The package includes constructors for all standard HTML5 elements, organized by category:
- Document Structure: Html, Head, Body, Title, Meta, Link, Style, Script
- Layout: Div, Span, P, Section, Article, Aside, Header, Footer, Main, Nav
- Headings: H1, H2, H3, H4, H5, H6
- Text: Strong, Em, Small, Mark, Code, Pre, Blockquote, Cite
- Lists: Ul, Ol, Li, Dl, Dt, Dd
- Links & Media: A, Img, Video, Audio, Source, Canvas, Svg
- Forms: Form, Input, Textarea, Button, Select, Option, Label, Fieldset
- Tables: Table, Thead, Tbody, Tfoot, Tr, Th, Td, Caption
- Interactive: Details, Summary, Dialog
All element constructors accept attributes as a map and variadic children:
dom.Div(dom.Attrs{"class": "container", "id": "main"},
dom.H1(nil, "Title"),
dom.P(nil, "Content"),
)
Helper functions are provided for common patterns:
dom.ClassProps("btn-primary") // Creates map with class attribute
dom.IdProps("my-element") // Creates map with id attribute
dom.HrefProps("/about") // Creates map with href attribute
dom.ClassIdProps("container", "main") // Creates map with both class and id
Source Files