我需要一个 Web 组件，它不允许样式从 IE 11 或 Edge 中的 Shadow DOM 溢出。内联样式可以工作，但我需要使用样式表。
我已经尝试了一切，包括标准网络组件、聚合物/LiteElement、react-shadow-dom-component 和普通的旧 JS。我附加的代码非常基本。这个例子没有使用样式表，它仍然流血。我尝试了多个 polyfill。我也尝试过使用 defer 和 async 加载程序。非常感谢任何帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-world</title>
<!-- Imports polyfill -->
<!--<script src="../webcomponentsjs/webcomponents.min.js"></script>-->
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-
bundle.js"></script>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/">
</script>
<!--<script src="node_modules/custom-elements-es5-adapter/custom-
elements-es5-adapter.js"></script>-->
<!-- Imports custom element -->
<!--<link rel="import" href="hello-world.html">-->
<!--<script src="shadowComponent.js"></script>-->
<style>
.text {
color: red;
}
</style>
</head>
<body>
<div class="text">I should be red.</div>
<div id="myText"></div>
<script type="text/javascript">
var element = document.getElementById('myText');
var styles = '.text{color: blue; }';
var content = 'I should be blue.';
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(styles));
var p = document.createElement('p');
p.className = 'text';
p.appendChild(document.createTextNode(content));
var shadowRootContainer = element.attachShadow({ mode: 'open' });
var innerContainer = document.createElement('div');
shadowRootContainer.appendChild(innerContainer);
var shadowRoot = innerContainer.attachShadow({ mode: 'open' });
shadowRoot.appendChild(style);
shadowRoot.appendChild(p);
</script>
</body>
</html>
在这个例子中有一个嵌套的 Shadow DOM，因为我束手无策，决定把一些代码扔到墙上看看是否有任何东西会粘住。我知道顺序对样式很重要。我希望使用 polyfill 这应该可以工作。它适用于 Chrome(显然)FF 和 Opera。如有必要，我有更复杂的例子。再次感谢您的帮助。
最佳答案
IE11 或 Edge(pre-chromium)中没有 shadowDOM。所以没有内置的方法来防止 shadowDOM 渗透。
如果您使用 BEM 之类的东西或其他方式来命名您的 CSS 选择器，您可以限制渗透。
关于css - 有没有人创建了一个 Shadow DOM 来阻止样式表从 IE 11 或 Edge 中的 Shadow DOM 渗出/泄漏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56029958/