0

Firefox アドオンを作成していますが、Firefox が attachShadow 関数をサポートしていないことがわかりました。したがって、私は Shadydom を使用しようとしていますが、シャドウ ルートを追加する予定の div にコンテンツを適用していますが、正常に機能していないようです。内部はある<style></style>のですが、ページの残りの部分に影響を与えているようですので、シャドウ ルートが適切に作成されていないのでしょうか?

shadydom.min.js は manifest.json ファイル内にロードされます。

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

シャドウ ルート dom を作成するためのコードを次に示します。ちなみに、var shadowは以前にコードで定義されています。

    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' });

次に、HTML 文字列を読み込み、次のように追加しますshadow.innerHTML += htmlString

この文字列の中にスタイリングと html コードがあり、リンクのグローバルなスタイリングがありますが、シャドウ DOM が作成された場合はその外側にあるページ上の他のすべてのリンクにも影響します。

また、Firefox はまだ Shadow DOM をサポートしていないため、Shadow DOM がインスペクタ ツールで作成されたかどうかを実際に確認することはできません。

4

1 に答える 1