HTML & SVG QuerySelector

query.ts

export function query<K extends keyof SVGElementTagNameMap>(
  name: K | `${K}.${string}` | `${K}#${string}` | `${K}[${string}]`,
  parent?: Element
): SVGElementTagNameMap[K]

export function query<K extends keyof HTMLElementTagNameMap>(
  name: K | `${K}.${string}` | `${K}#${string}` | `${K}[${string}]`,
  parent?: Element
): HTMLElementTagNameMap[K]

export function query<
  K extends keyof (SVGElementTagNameMap | HTMLElementTagNameMap)
>(
  name: K | `${K}.${string}` | `${K}#${string}` | `${K}[${string}]`,
  parent: Element = document.body
) {
  return parent.querySelector(name) as K extends keyof SVGElementTagNameMap
    ? SVGElementTagNameMap[K]
    : HTMLElementTagNameMap[K]
}