I selfhost changedetection.io to get notifications when a webpage changes.

Most of the time, the build-in visual selector is all I need to select the parts of the page I want it to monitor.

Some of the time I need to write custom (CSS) query selectors.

Today I had an interesting case where both of those methods failed. The page (laposte.fr) uses webcomponents who write to shadowdom. Shadowdom isn’t directly addressable by CSS or Xpath or … filter.

The trick was to run some custom javascript, in the “browser steps” section:

document.body.innerHTML = document.querySelector("#shadowdom_parent_container").shadowRoot.textContent;

This replaces the document body with whatever text is inside the webcomponent. Now it’s as simple as having the monitor watch for changes on the body tag.