CSS が私たちの CSS に干渉するのを防ぐために、シャドウ DOM を使用して、サードパーティの Web サイト用のウィジェットを作成しています。Edge と IE で動作させるためにShadyDOMとShadyCSSポリフィルを使用していますが、期待どおりに Shadow DOM の CSS を変換していません。
例：
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM test</title>
</head>
<body>
<div id="container">container is here</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<script>
const shadow = document.getElementById("container").attachShadow({ mode: "open" });
const style = document.createElement("style");
style.innerHTML = `
:host .stuff {
background: #ff00ff;
}
`;
shadow.appendChild(style);
const div = document.createElement("div");
div.classList.add("stuff");
div.innerHTML = "stuff inside shadow dom";
shadow.appendChild(div);
</script>
</body>
</html>Chrome (シャドウ DOM をネイティブにサポート) では、stuff予想どおり、div の背景がピンク色になります。しかし、Edge (シャドウ DOM をネイティブにサポートしていない) では、「シャドウ DOM 内のもの」というテキストが表示されます (スクリプトが実行され、ShadyDOM 関数が機能したことを意味します) が、ピンク色の背景が表示されません。
なぜこうなった？ShadyCSS README の例のようにカスタム要素を使用する代わりに、従来の div にシャドウ ルートをアタッチしていますが、それは問題ですか? もしそうなら、どうすればこれを機能させることができますか？私は大規模な既存divのbuttonアプリに取り組んでおり、一度にあまり多くの変更を加えたくないので、自分の独自の要素またはテンプレート、ただし、多くの大きな変更を加えることなく簡単に実行できる場合は、テンプレートおよび/またはカスタム要素を検討します。