הדבר היחיד שכיף יותר מלמחוק קוד הוא לשכוח שיטת עבודה מסורבלת כי כבר לא צריך אותה. מנגנון CSS Custom Highlight מאפשר לנו "לתפוס" חלק מהטקסט של אלמנט ב DOM ולעצב אותו בצורה שונה, בלי שנצטרך לעטוף את החלק הזה ב span. שימו לב לדוגמה הבאה-

<p id="foo">CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.</p>

::highlight(user-1-highlight) {
  background-color: yellow;
  color: black;
}

const p = document.getElementById("foo");
const text = p.firstChild;
const range = new Range();
range.setStart(text, 10);
range.setEnd(text, 20);

const highlight = new Highlight(range);

CSS.highlights.set("user-1-highlight", highlight);

הקוד צובע את תווים 10 עד 20 מהטקסט שבפיסקה, בלי לשנות את מבנה ה DOM ולהוסיף span-ים מיותרים. המנגנון הזה מושלם להדגשת תוצאות חיפוש, צביעת קוד או עריכה משותפת של מסמך כשכל משתמש כותב בצבע אחר.

ומה שבאמת מופלא ב API הזה הוא שאין בעיה לסמן בין אלמנטים, כלומר setStart ו setEnd של range לא חייבים לקבל את אותו אלמנט. הנה עדכון לדוגמה עם סימון חוצה פיסקאות:

<p id="foo">CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.</p>
<p id="bar">and it can span multiple paragraphs too</p>

const foo = document.getElementById("foo");
const start = foo.firstChild;

const bar = document.getElementById("bar");
const end = bar.firstChild;
const range = new Range();
range.setStart(start, 20);
range.setEnd(end, 5);

const highlight = new Highlight(range);

CSS.highlights.set("user-1-highlight", highlight);

בהרבה מקרים תרצו לשלב את זה עם TreeWalker כדי לחשב את האינדקסים, אבל עדיין המנגנון משמעותית יותר יעיל ופשוט מהוספה והזזת span-ים.

תיעוד מלא שתרצו לקרוא אפשר למצוא ב MDN בקישור: https://developer.mozilla.org/en-US/docs/Web/API/CSSCustomHighlight_API

ועל Tree Walker אפשר לקרוא כאן: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker