Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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