【TypeScript】クリックした位置にシャドウDOMを表示する機能を実装してみた

import css from './index.css?inline'

let clickCount = 0;       // クリックした回数
let bubbleHost: HTMLDivElement | null = null;           // 吹き出しを覆うDOM
let bubbleText: HTMLSpanElement | null = null;           // 吹き出し内のテキスト

/**
 * 吹き出しを生成する
 */
function createBubble(x: number, y: number): { host: HTMLDivElement; tooltipText: HTMLSpanElement } {
  // CSS
  const sheet = new CSSStyleSheet();
  sheet.replaceSync(css);

  // Shadow DOMで吹き出しを作成
  const host = document.createElement('div');
  host.id = 'shadow';
  host.style.position = 'absolute';
  host.style.left = `${x}px`;
  host.style.top = `${y}px`;
  host.style.zIndex = '9999';

  // 吹き出しの中の要素を追加
  // ルート
  const shadow = host.attachShadow({ mode: "open" });
  shadow.adoptedStyleSheets = [sheet];

  // 内枠
  const tooltip = document.createElement("div");
  tooltip.className = "tooltip";

  // テキスト部分
  const tooltipText = document.createElement("span");
  tooltipText.className = "tooltip-text";
  tooltipText.textContent = "";

  // 要素を追加
  tooltip.appendChild(tooltipText);
  shadow.appendChild(tooltip);
  document.body.appendChild(host);

  return { host, tooltipText };
}

document.addEventListener('dblclick', function () {
  const selection = window.getSelection();
  if (!selection || selection.rangeCount === 0) {
    return;
  }

  const selectedText = selection.toString();
  const selectionRect = selection.getRangeAt(0).getBoundingClientRect();
  const bubbleX = selectionRect.left + selectionRect.width / 2 + scrollX;
  const bubbleY = selectionRect.bottom + scrollY;

  // 既にDOMが生成されている
  if (bubbleHost && bubbleText) {
    bubbleText.textContent = `${clickCount}回目のクリック`;
    bubbleHost.style.left = `${bubbleX}px`;
    bubbleHost.style.top = `${bubbleY}px`;
    clickCount++;
    return;
  }

  if (!selectedText) {
    return;
  }

  // DOMを新規作成
  const bubbleElements = createBubble(bubbleX, bubbleY);
  bubbleHost = bubbleElements.host;
  bubbleText = bubbleElements.tooltipText;
  bubbleText.textContent = `${clickCount}回目のクリック`;
  clickCount++;
});

function createBubble(x: number, y: number): { host: HTMLDivElement; tooltipText: HTMLSpanElement } {
  // CSS
  const sheet = new CSSStyleSheet();
  sheet.replaceSync(css);

  // Shadow DOMで吹き出しを作成
  const host = document.createElement('div');
  host.id = 'shadow';
  host.style.position = 'absolute';
  host.style.left = `${x}px`;
  host.style.top = `${y}px`;
  host.style.zIndex = '9999';

  ...
}

  // 既にDOMが生成されている
  if (bubbleHost && bubbleText) {
    bubbleText.textContent = `${clickCount}回目のクリック`;
    bubbleHost.style.left = `${bubbleX}px`;
    bubbleHost.style.top = `${bubbleY}px`;
    clickCount++;
    return;
  }