Firefox: Polyfill/Shadydom not making the shadow root (style inside still affects rest of the page)

Question

I'm making a Firefox addon, and I've learned that Firefox does not support the attachShadow function. Therefore I'm trying to use Shadydom, and now it is applying the content to the div, where the shadow root is meant to be added, but it seems it doesn't work as it should. I have a <style></style> inside, but it seems to affect the rest of the page, so the shadow root must not have been created properly?

The shadydom.min.js is loaded inside the manifest.json file.

"content_scripts": [
{
  "matches": ["http://*/*", "https://*/*"],
  "js": ["contentscript.js", "assets/js/shadydom.min.js"],
  "run_at": "document_start"
}

Here's the code I have for creating the shadow root dom. By the way, var shadow has been defined previously in the code.

    var divContainer = document.createElement('div');
    divContainer.setAttribute('id','container');
    divContainer.style.cssText = 'all:initial;';

    document.body.appendChild(divContainer);

    // Create the shadow root
    shadow = document.querySelector('#container')
    .attachShadow({ mode: 'open' });

I then load a HTML string and append it like this shadow.innerHTML += htmlString

Inside this string there is styling and html code, I have global styling for links, but it also affect all the other links on the page, which should be outside of the shadow dom, if it was created.

Also, since Firefox does not support shadow doms yet, I can't actually see if the shadow dom was created with the inspector tools.. Anyone knows what I can do?

Answer 1

@JDoe - You are also going to need ShadyCSS to isolate the CSS - https://github.com/webcomponents/shadycss/