ネイティブUI要素をクローンしてスタイルを継承する

interface CloneButtonOptions {
  /** クローン元のセレクター */
  templateSelector: string
  /** 置き換える新しいテキスト */
  text: string
  /** 置き換える新しいアイコン（省略可） */
  icon?: string | HTMLElement
  /** クリック時のコールバック */
  onClick: (event: MouseEvent) => void
}

/**
 * ホストアプリの既存ボタンをクローンして新しいボタンを生成する
 */
export const cloneNativeButton = (
  options: CloneButtonOptions
): HTMLElement | null => {
  const { templateSelector, text, icon, onClick } = options

  // クローン元を取得
  const template = document.querySelector<HTMLElement>(templateSelector)
  if (!template) {
    console.warn(`Template not found: ${templateSelector}`)
    return null
  }

  // 深いクローンを作成（子要素・属性・イベントハンドラーは除く）
  const cloned = template.cloneNode(true) as HTMLElement

  // テキストノードを置き換え
  const textNode = findTextNode(cloned)
  if (textNode) {
    textNode.textContent = text
  }

  // アイコンを置き換え（指定された場合）
  if (icon) {
    const iconElement = findIconElement(cloned)
    if (iconElement) {
      const newIcon = typeof icon === 'string'
        ? createIconFromString(icon)
        : icon
      iconElement.replaceWith(newIcon)
    }
  }

  // 元のイベントリスナーは複製されないため、新しいものを設定
  cloned.addEventListener('click', onClick)

  // IDがあれば削除（重複回避）
  if (cloned.id) {
    cloned.removeAttribute('id')
  }

  return cloned
}

/**
 * 要素内の最初のテキストノードを見つける
 */
const findTextNode = (element: HTMLElement): Text | null => {
  const walker = document.createTreeWalker(
    element,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: (node) => {
        // 空白のみのノードを除外
        return node.textContent?.trim()
          ? NodeFilter.FILTER_ACCEPT
          : NodeFilter.FILTER_REJECT
      }
    }
  )
  return walker.nextNode() as Text | null
}

/**
 * 要素内の最初のアイコン要素を見つける（svg, img, i など）
 */
const findIconElement = (element: HTMLElement): Element | null => {
  return (
    element.querySelector('svg') ||
    element.querySelector('img') ||
    element.querySelector('i[class*="icon"]') ||
    element.querySelector('[role="img"]')
  )
}

/**
 * HTML文字列からアイコン要素を生成
 */
const createIconFromString = (html: string): HTMLElement => {
  const template = document.createElement('template')
  template.innerHTML = html.trim()
  return template.content.firstElementChild as HTMLElement
}

// GitHub の既存ボタンスタイルを流用する
const myButton = cloneNativeButton({
  templateSelector: '.Button--primary',
  text: 'Deploy',
  icon: '<svg>...</svg>',
  onClick: () => {
    console.log('Deploying...')
  }
})

// DOM に追加
document.querySelector('.toolbar')?.appendChild(myButton)