我需要一个Web组件，该Web组件不允许样式从IE 11或Edge中的阴影DOM中流出。内联样式将起作用，但我需要使用样式表。
我已经尝试了所有内容，包括标准的Web组件，聚合物/Litelement，React Shadow-Dom-Compont和Plain Old JS。我附加的代码非常基本。此示例不使用样式表，并且仍然流血。我尝试了多个多填充。我还尝试了使用延期和异步的装载机。任何帮助都非常感谢。
<!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>
在此示例中有一个嵌套的阴影DOM，因为我处于智慧状态，并决定在墙壁上投掷一些代码，以查看是否会粘住。我知道订单在样式上很重要。我希望有了多填充，这应该有效。它在Chrome(显然(FF和Opera中起作用。如有必要，我有更复杂的例子。再次对任何帮助都非常感谢。
IE11或Edge(pre-chromium(中没有阴影。因此，没有内置的方式来防止阴影渗透。
如果您使用诸如BEM或其他其他方式对CSS选择器进行命名，则可以限制穿透。
您可以用webcopmonentsjs polyfill的ShadyCSS组件模拟Shadowdom scoped css。有一些局限性，仅在组件中包含CSS，它不会阻止外部样式泄漏。