element

const link = anchor({ href: '/home', textContent: 'Home' })
link.element // => HTMLAnchorElement

const post = article({ class: 'blog-post' })
post.element // => HTMLElement

const sidebar = aside({ class: 'sidebar' })
sidebar.element // => HTMLElement

const submitBtn = button({ class: 'btn-primary', textContent: 'Submit' })
submitBtn.element // => HTMLButtonElement

const drawing = canvas({ width: '800', height: '600' })
drawing.element // => HTMLCanvasElement

const card = createElement('div', {
  className: 'card',
  classNames: ['shadow', 'rounded'],
  inlineStyle: { padding: '16px', margin: '8px' }
})

const title = createElement('h2')
title.ref.textContent = 'Card Title'

card.addChild(title)
card.attachTo(document.body)
card.show(300) // Fade in over 300ms

const container = div({ class: 'container', id: 'main' })
container.element // => HTMLDivElement

const pageFooter = footer({ class: 'site-footer' })
pageFooter.element // => HTMLElement

const cancel = getElementAsync('#dynamic-content', {
  duration: 5000,
  interval: 100,
  onSuccess: (element) => {
    console.log('Element found:', element)
  },
  onFail: () => {
    console.log('Element not found within timeout')
  },
})

// Cancel polling if no longer needed
cancel()

const title = header(1, { textContent: 'Page Title' })
title.element // => HTMLHeadingElement (h1)

const avatar = img({ src: '/avatar.png', alt: 'User avatar' })
avatar.element // => HTMLImageElement

const email = input({ type: 'email', placeholder: 'Enter email' })
email.element // => HTMLInputElement

const emailLabel = label({ for: 'email', textContent: 'Email:' })
emailLabel.element // => HTMLLabelElement

const item = listItem({ textContent: 'First item' })
item.element // => HTMLLIElement

const container = document.getElementById('resizable-panel')
const stopObserving = onElementResize(container, (rect) => {
  console.log(`New size: ${rect.width}x${rect.height}`)
})

// Stop observing when done
stopObserving()

const steps = orderedList({ class: 'instructions' })
steps.element // => HTMLOListElement

const text = paragraph({ textContent: 'Hello, world!' })
text.element // => HTMLParagraphElement

const about = section({ id: 'about', class: 'page-section' })
about.element // => HTMLElement

const badge = span({ class: 'badge', textContent: 'New' })
badge.element // => HTMLSpanElement

// Sync an overlay to match a video player's dimensions
const stopSync = syncElementDimensions('#video-player', '#overlay', {
  onSuccess: () => console.log('Elements synced'),
})

// Stop syncing when component unmounts
stopSync()

const body = tableBody({ id: 'data-rows' })
body.element // => HTMLTableSectionElement

const cell = tableCell({ textContent: 'John Doe' })
cell.element // => HTMLTableCellElement

const foot = tableFooter({ class: 'summary' })
foot.element // => HTMLTableSectionElement

const head = tableHead({ class: 'sticky-header' })
head.element // => HTMLTableSectionElement

const grid = tableHeader({ class: 'data-table' })
grid.element // => HTMLTableElement

const header = tableHeaderCell({ textContent: 'Name', scope: 'col' })
header.element // => HTMLTableCellElement

const row = tableRow({ class: 'data-row' })
row.element // => HTMLTableRowElement

const menu = unorderedList({ class: 'nav-menu' })
menu.element // => HTMLUListElement