获取这个父元素在文档中的绝对位子信息，并在这个位子上以绝对定位画一个红色框把这个元素框起来

可以使用 `Element.getBoundingClientRect()` 方法获取到含有 `data-comp` 属性的父元素在文档中的绝对位置信息，然后使用绝对定位来画一个红色框把这个元素框起来。例如，如果我们要在点击事件中获取含有 `data-comp` 属性的父元素在文档中的绝对位置信息，并画一个红色框把这个元素框起来，可以这样做：

document.addEventListener('click', event => {
  const compElement = event.target.closest('[data-comp]');

  if (compElement) {
    const rect = compElement.getBoundingClientRect();
    const div = document.createElement('div');

    div.style.position = 'absolute';
    div.style.left = `${rect.left}px`;
    div.style.top = `${rect.top}px`;
    div.style.width = `${rect.width}px`;
    div.style.height = `${rect.height}px`;
    div.style.border = '2px solid red';

    document.body.appendChild(div);
  }
});

在上面的代码中，`Element.getBoundingClientRect()` 方法会返回含有 `data-comp` 属性的父元素在文档中的绝对位置信息。然后我们使用绝对定位来画一个红色框把这个元素框起来，并添加到文档中。