contentScript cant append child to shadowRoot

[Ruslan Zhunus]

In contentScript
I create shadowRoot but I cant appendChild to this shadowRoot.

// Create a div with shadow root
const appRoot = document.createElement('div');
const shadowRoot = appRoot.attachShadow({ mode: 'closed' });

// Add div to shadow root
const inner = document.createElement('div');
inner.innerHTML = 'Hello World';
shadowRoot.appendChild(inner);

document.body.insertBefore(appRoot, document.body.firstChild);

also I cant  add elements using shadowRoot.innerHTML

[wOxxOm]

It may fail in these two cases:

1.  `document.body` doesn't have a child node if your content script runs at `document_start` - the solution is to append to document.documentElement or wait for body to appear via Mutation Observer or inside a DOMContentLoaded listener.
   
   
2. the site is using trustedHTML policy, so since it wasn't special-cased for extensions you need to abide by the rules for web pages and either use textContent instead of innerHTML (for simple text) or construct DOM using createElement explicitly (there are many libraries to assist in that e.g. quick googling shows crel), which is a very good practice anyway to avoid XSS and other inherent problems of html.

If none of the above helps, you need to debug the problem in the built-in devtools debugger.

[wOxxOm]

...correction: `document.body` is absent if your content script runs at `document_start`

[Ruslan Zhunus]

I have also tried using this code, but it did not work. my content script is running at 'document_idle'

const styleEl = document.createElement('style');
styleEl.textContent = `...some css styles...`;
shadowRoot.appendChild(styleEl);

[wOxxOm]

Since this exact code works in other extensions, there must be something else in the other parts of the script. Debug it in devtools or show the complete code here along with manifest.json so someone else could have a look. Maybe your content script doesn't run at all due to incorrect "matches" or the site being forbidden to access via runtime_blocked_hosts policy.

[Ruslan Zhunus]

The creation of the shadowRoot and appRoot div in my contentScript is successful. However, I am unable to add elements like "style" to the shadow root. I noticed that I can only add them after inserting the appRoot element into my DOM, and only if the mode is set to "open". Based on this, are you suggesting that the issue lies with my implementation and not with the overall functionality?

[wOxxOm]

Your exact code works here as-is, no changes, in the content script.