Intersection Observers

<script is:inline>
  // Toggle classes when items are in view
  const observerHandler = (entries) => {
    for (const entry of entries) {
      const heading = entry.target; // observed item
      const tocItem = document.querySelector("#toc-example"); // corresponding item in TOC

      console.log(tocItem);

      document.querySelector("html").classList.add("bg-error");
      document.querySelector("html").classList.add("light");
      document.querySelector("html").classList.remove("dark");

      tocItem.classList.toggle("text-error");

      tocItem.style.textDecoration = "underline";

      if (entry.isIntersecting) {
        // this works
        heading.classList.add("text-error");

        // test: this doesn't
        tocItem?.classList.add("text-error");

        // this what i actually want to do
        tocItem?.classList.add(
          "underline",
          "text-t3-purple-700",
          "dark:text-t3-purple-100",
        );
      } else {
        // again, this works
        heading.classList.remove("text-error");

        // this doesn't
        tocItem?.classList.remove("text-error");

        // this is what i actually want to do
        tocItem?.classList.remove(
          "underline",
          "text-t3-purple-700",
          "dark:text-t3-purple-100",
        );
      }
    }
  };

  const observerOptions = {
    rootMargin: "-100px 0% -66%",
    threshold: 1,
  };

  const observer = new IntersectionObserver(observerHandler, observerOptions);

  document.querySelectorAll("article :is(h1,h2,h3)").forEach((h) => {
    observer.observe(h);
  });
</script>

<script is:inline>
  // Toggle classes when items are in view
  const observerHandler = (entries) => {
    for (const entry of entries) {
      const heading = entry.target; // observed item
      const tocItem = document.querySelector("#toc-example"); // corresponding item in TOC

      console.log(tocItem);

      document.querySelector("html").classList.add("bg-error");
      document.querySelector("html").classList.add("light");
      document.querySelector("html").classList.remove("dark");

      tocItem.classList.toggle("text-error");

      tocItem.style.textDecoration = "underline";

      if (entry.isIntersecting) {
        // this works
        heading.classList.add("text-error");

        // test: this doesn't
        tocItem?.classList.add("text-error");

        // this what i actually want to do
        tocItem?.classList.add(
          "underline",
          "text-t3-purple-700",
          "dark:text-t3-purple-100",
        );
      } else {
        // again, this works
        heading.classList.remove("text-error");

        // this doesn't
        tocItem?.classList.remove("text-error");

        // this is what i actually want to do
        tocItem?.classList.remove(
          "underline",
          "text-t3-purple-700",
          "dark:text-t3-purple-100",
        );
      }
    }
  };

  const observerOptions = {
    rootMargin: "-100px 0% -66%",
    threshold: 1,
  };

  const observer = new IntersectionObserver(observerHandler, observerOptions);

  document.querySelectorAll("article :is(h1,h2,h3)").forEach((h) => {
    observer.observe(h);
  });
</script>