有没有人创建过Shadow DOM，以阻止样式表从IE 11或Edge中渗入/泄漏出Shadow DOM？

Question

我需要一个Web组件，该组件不允许样式从IE 11或Edge中的Shadow DOM流失。内联样式可以使用，但是我需要使用样式表。

我已经尝试了所有方法，包括标准的Web组件，聚合物/ LiteElement，react-shadow-dom-component和普通的旧JS。我要附加的代码非常基本。这个例子不使用样式表，但仍然流血。我尝试了多个polyfill。我还尝试了延迟和异步加载程序。任何帮助将不胜感激。

buildscript {
    ext.kotlin_version = '1.3.31'
    repositories {
        google()
        jcenter()


    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.2.0'
    }
}

allprojects {
    repositories {
        google()
        jcenter()

    }
}

在此示例中有一个嵌套的Shadow DOM，因为我不知所措，决定在墙上扔一些代码以查看是否会粘住任何东西。我知道顺序很重要。我希望使用polyfills应该可以。它适用于Chrome（显然）的FF和Opera。如有必要，我有更复杂的示例。再次感谢您的帮助。

Answer 1

IE11或Edge（前置铬）中没有shadowDOM。因此，没有内置的方法可以防止shadowDOM渗透。

如果您使用BEM之类的名称或CSS选择器的其他名称命名方式，则可以限制渗透率。

Answer 2

您几乎可以使用ShadyCSS polyfill的webcopmonentsjs组件来模拟ShadowDOM范围的CSS。 limitations有一些，它仅在组件内包含CSS，不会阻止外部样式的泄漏。