Selection Highlighter Demo

Select any text on this page to see the closest element get a purple outline. Try selecting text inside the green box below to see how it works with a Shadow DOM.

Content in the Main DOM

Bolded text is one of many inline elements. Selecting it will highlight its parent `p` tag.

Here is a more complex nested structure: a paragraph with a nested bold element and a link inside a span. The highlighter will find the closest parent element to your selection.

This is another paragraph with a struck-through word and a bold and italicized phrase.

Content Inside a Shadow DOM