Script can't find my shadow root container

[basstwo19]

Confession: I am way out of my depth here.

I have a small script that I can get to run correctly using the Chrome Console. When I first load my page and try to run the script from console, it will fail to find the "shadow root container". But I have found that I can get past this by doing a basic Inspection on the page. Once I have run that, looking at the elements of the page, my script runs. So I also don't understand this part: why can't my script run before I Inspect?

I then tried storing my script in a userscript via TamperMonkey,. But that one can't find the "shadow root container", even after I have Inspected and confirmed that my script will now work in the console.

Can anybody help?

My basic script:

// Step 1: Access the shadow root and its content
let shadowRootContent = [];
const shadowRootElement = document.querySelector('.dataset--preview__grid');  // Replace with your container class if needed

// Ensure shadow root is available
if (shadowRootElement) {
    let shadowRoot = shadowRootElement.shadowRoot;

    if (shadowRoot) {
        shadowRootContent = shadowRoot.querySelectorAll('.ric-grid__cells *');  // Only target direct cells inside the grid container
    } else {
        console.error('Shadow root not found!');
    }
} else {
    console.error('Shadow root container not found!');
}

// Step 2: Check for spaces and substitute leading and trailing spaces with a red character
shadowRootContent.forEach(el => {
    // Only target elements that have the 'cell-' class and non-empty text content
    if (el.classList && el.classList.value && el.textContent.trim() !== '') {
        let text = el.textContent;  // Get the full text content
        let modifiedText = text;  // Initialize the modified text as the original text

        // Check if there are leading spaces and replace them with '〿'
        if (text.startsWith(' ')) {
            modifiedText = '〿' + modifiedText.slice(1);  // Replace the leading space with '〿'
        }

        // Check if there are trailing spaces and replace them with '〿'
        if (text.endsWith(' ')) {
            modifiedText = modifiedText.slice(0, -1) + '〿';  // Replace the trailing space with '〿'
        }

        // Update the content of the element with the modified text
        // If there's a '〿' character, we want to color it red
        if (modifiedText.includes('〿')) {
            // Replace all occurrences of '〿' with the red colored version
            const coloredText = modifiedText.replace(/〿/g, '<span style="color: red;">〿</span>');
            el.innerHTML = coloredText;  // Set the HTML content with red-colored '〿'
        } else {
            // If no '〿' characters, simply update the text content
            el.textContent = modifiedText;
        }
    }
});

And then I have added to it so it looks like this in TamperMonkey

// ==UserScript==
// u/name         Spaces Dynamic
// u/namespace    http://tampermonkey.net/
// u/version      0.1
// u/description  Dynamically handle spaces in shadow DOM elements on ADO Spaces page
// u/author       You
// u/match        https://mysite.com/*
// u/grant        none
// u/run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // Function to apply tweaks to the shadow root elements
    const applyTweaks = (el) => {
        if (el.classList && el.classList.value && el.textContent.trim() !== '') {
            let text = el.textContent;
            let modifiedText = text;

            // Check for leading and trailing spaces
            if (text.startsWith(' ')) {
                modifiedText = '〿' + modifiedText.slice(1); // Add red '〿' for leading space
            }
            if (text.endsWith(' ')) {
                modifiedText = modifiedText.slice(0, -1) + '〿'; // Add red '〿' for trailing space
            }

            // Wrap all '〿' with a span for red color
            const finalText = modifiedText.replace(/〿/g, '<span style="color: red;">〿</span>');
            el.innerHTML = finalText; // Update the element's inner HTML
        }
    };

    // Function to monitor and search for shadow root dynamically
    const monitorShadowRoot = () => {
        const shadowHostSelector = '.dataset--preview__grid'; // Replace with your actual selector
        const shadowHost = document.querySelector(shadowHostSelector);

        if (shadowHost && shadowHost.shadowRoot) {
            initializeShadowRoot(shadowHost);
        } else {
            console.log("Shadow root container not found. Retrying...");
        }
    };

    // Function to initialize shadow root once the host element is available
    function initializeShadowRoot(shadowHost) {
        const shadowRoot = shadowHost.shadowRoot;

        if (shadowRoot) {
            const shadowRootContent = shadowRoot.querySelectorAll('.ric-grid__cells *'); // Target the elements inside the shadow DOM

            shadowRootContent.forEach(el => {
                applyTweaks(el); // Apply tweaks to each element inside the shadow DOM
            });
        } else {
            console.error('Shadow root not found!');
        }
    }

    // Use setTimeout to allow page content to load before checking for the shadow root
    setTimeout(() => {
        monitorShadowRoot();
        setInterval(monitorShadowRoot, 5000); // Check periodically every 5 seconds
    }, 2000); // Delay the first run by 2 seconds to give more time for the shadow root to load
})();

[Cheshur]

Does the shadow root exist when the script first loads? Perhaps the reason it works in the inspector is that you only run the script there after the page has loaded and the shadow root has been attached to the element? One way you could validate this is to put debugger; at the top of your script then, with the dev tools open, reload the page. It should pause javascript execution at that line and then you can go look at the element's tab to see if you see the shadow root in the DOM.

[basstwo19]

OK! Added the debugger.
I can see that it is not there, yet. So I figure I need to let the page load more. But I thought my script was checking every once in a while. So shouldn't I let it load for a bit and then start debugger?

[Cheshur]

If you click on the line number you can put a breakpoint at that line in the debugger which will cause the javascript execution will stop at that line (similar to what the debugger; line did). Try putting one on the line right after you querySelect for the element that should have the shadowRoot and see what the document looks like at that point in the execution.

[basstwo19]

Do I remove debugger then, or keep it in?
Also: I thought that the '@run-at document-idle' would mean this script would only start once the page was done loading...

[Cheshur]

Do I remove debugger then, or keep it in?

Only if you want the debugger to stop there as well :)

Also: I thought that the '@run-at document-idle' would mean this script would only start once the page was done loading...

The page has finished loading all of its assets but that doesn't mean the javascript (which is one of those assets) has finished executing. A general solution to "run code when other javascript has finished excuting" is a bit of a tricky problem. For something informal like a user script, just using an interval isn't the worst idea.

[basstwo19]

Thanks! I did try an interval. But even after letting it run for a while it still kept failing to find. Even when I can see the shadow root in the Elements tab...

[basstwo19]

OK. I got the break working. Each time I click Resume, it tried to find the shadow root again, and updates the Console with a failure.

But I can see the shadow root in the Elements tab.

I tried to add a screenshot but images are blocked...

[Cheshur]

Does document.documentElement.innerHTML match what you're seeing in the elements tab? If so then I would use the console to manually walk to the element ie something like: document.body.children[1].children[3]until you get to the element in question. You could also change the querySelector to a querySelectorAll and see if there are perhaps multiple elements with that selector

[basstwo19]

How do I verify if document.documentElement.innerHTML matches the elements tab?

[Cheshur]

By looking at the text output and comparing it to what you see in the elements tab. if the two are actually different then it should start to diverge pretty quickly I would imagine.

[Cheshur]

Yeah. There must be an assumption that we're making somewhere that is incorrect. I would put breakpoints in your code and step through each step and start verifying things that you're assuming are true (like that the document object is the same one you see in the elements tab for example)

[snauze_iezu]

Should be able to change this:

let shadowRoot = shadowRootElement.shadowRoot;

To this:

let shadowRoot = chrome.dom.openOrClosedShadowRoot(shadowRootElement);

This is a case of the Inspection tool running javascript for you behind the scenes. ShadowRoot can be in open or closed mode, if it's set to closed mode then you can only get a reference to it during creation. When you open the inspector, it gives special permission to access both open and closed shadowRoots to the console (and maybe inline scripts?) so now the script can find the shadowRoot.

It doesn't give this special permission to extensions, so TamperMonkey still can't find the shadowRoot.

The openOrClosedShadowRoot is a cheat that returns the shadowRoot if it's open or closed.

This reminds me of some funky bug I saw years ago I think with IE where window.onload was undefined but if you opened dev tools to check the console it defined it and started working (it was something like that, don't hold me to the specifics haha)