el function

HTMLElement el(
  1. String tag, {
  2. String? classes,
  3. String? text,
  4. String? id,
  5. String? role,
  6. String? ariaLabel,
  7. Map<String, String>? attrs,
  8. List<Node> children = const [],
  9. void onClick(
    1. Event event
    )?,
})

Ergonomic DOM construction over package:web.

el('div', classes: 'card', children: [...]) reads far better than a stack of createElement / appendChild calls, while staying plain DOM (no framework). All UI components build their subtree with these helpers.

Implementation

web.HTMLElement el(
  String tag, {
  String? classes,
  String? text,
  String? id,
  String? role,
  String? ariaLabel,
  Map<String, String>? attrs,
  List<web.Node> children = const [],
  void Function(web.Event event)? onClick,
}) {
  final e = web.document.createElement(tag) as web.HTMLElement;
  if (classes != null) e.className = classes;
  if (id != null) e.id = id;
  if (text != null) e.textContent = text;
  if (role != null) e.setAttribute('role', role);
  if (ariaLabel != null) e.setAttribute('aria-label', ariaLabel);
  attrs?.forEach((k, v) => e.setAttribute(k, v));
  for (final c in children) {
    e.appendChild(c);
  }
  if (onClick != null) e.addEventListener('click', onClick.toJS);
  return e;
}