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); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment