是否有人在 IE 11 或 Edge 中创建了一个 Shadow DOM 来阻止来自 bleeding/leaking 的样式表的 Shadow DOM？

Question

我需要一个 Web 组件，它不允许样式从 IE 11 或 Edge 中的阴影 DOM 渗出。内联样式可以工作，但我需要使用样式表。

我已经尝试了所有方法，包括标准 Web 组件、polymer/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>

在这个例子中有一个嵌套的影子 DOM 因为我束手无策，决定把一些代码扔到墙上看看是否有任何东西会粘住。我知道顺序对样式很重要。我希望使用 polyfill 这应该可以工作。它适用于 Chrome（显然）FF 和 Opera。如有必要，我有更复杂的例子。再次感谢您的帮助。

Answer 1

IE11 或 Edge (pre-chromium) 中没有 shadowDOM。所以没有built-in方法来防止shadowDOM渗透。

如果您使用 BEM 之类的东西或 name-spacing 您的 CSS 选择器的其他方式，您可以限制渗透。

Answer 2

你几乎可以用 ShadyCSS component of the webcopmonentsjs polyfill. There are some limitations 模拟 ShadowDOM 作用域 CSS 并且它只会在组件中包含 CSS，它不会阻止外部样式泄漏。

是否有人在 IE 11 或 Edge 中创建了一个 Shadow DOM 来阻止来自 bleeding/leaking 的样式表的 Shadow DOM？

Has anyone created a Shadow DOM that stops stylesheets from bleeding/leaking out of a Shadow DOM in IE 11 or Edge?

css

web-component

shadow-dom