component_highlighter.ts

const HIGHLIGHT_WIDTH = 2;
const HIGHLIGHT_SELECTOR = '[data-component]';

function createHighlighterForElement(component: HTMLElement) {
  const highlighter = document.createElement('div');

  const { x, y, width, height } = component.getBoundingClientRect();
  highlighter.style.cssText = `
    top: ${y + window.scrollY - HIGHLIGHT_WIDTH}px;
    left: ${x - HIGHLIGHT_WIDTH}px;
    height: ${height}px;
    width: ${width}px;
    border: ${HIGHLIGHT_WIDTH}px solid red;
    position: absolute;
  `;

  return highlighter;
}

function highlightComponents() {
  const components = document.querySelectorAll<HTMLElement>(HIGHLIGHT_SELECTOR);

  components.forEach((component) => {
    const highlighter = createHighlighterForElement(component);
    document.body.appendChild(highlighter);
  });
}