Hlper that attempts to convert a custom element class' name into a valid custom element name.

class-to-element.js

// PCENChar comes from the Custom Element spec
// PCEN = Potential Custom Element Name
// https://www.w3.org/TR/custom-elements/#custom-elements-core-concepts
const PCEN_CHAR = /[-a-z._0-9\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\u10000-\uEFFFF]/
const VALID_PCEN = new RegExp(`^[a-z]${PCEN_CHAR.source}*-${PCEN_CHAR.source}*$`)

const CAPS = /([A-Z])/g
const INNER_CAPS = /((?!^|[a-z]))([A-Z])/g

function classNameToElementName(Class) {
  const name = Class.name
    .replace(INNER_CAPS, '$1-$2')
    .replace(CAPS, g => g.toLowerCase())

  if (!VALID_PCEN.test(name)) {
    throw new Error(`Could not auto-convert class "${Class.name}" to a valid custom element name (tried "${name}")`)
  }

  return name
}