IE11中的Lit元素，自定义元素外部的css样式影响内部的样式_Css_Internet Explorer_Internet Explorer 11_Lit Element

IE11中的Lit元素，自定义元素外部的css样式影响内部的样式

css internet-explorer

IE11中的Lit元素，自定义元素外部的css样式影响内部的样式,css,internet-explorer,internet-explorer-11,lit-element,Css,Internet Explorer,Internet Explorer 11,Lit Element,在我的应用程序中为p元素设置css样式只会影响IE11中lit元素中的p元素我已经设置了一个非常基本的示例来说明这个问题。当你在IE11中打开它时，你会注意到自定义元素p文本是斜体，这种样式来自外部。在其他浏览器中，这种情况不会发生这是一个已知的问题，IE11无法阻止吗？或者有没有办法解决这个问题？我重复了我的问题，可能是IE浏览器的默认行为。因为外部CSS样式是全局样式作为一种解决方法，您可以更改选择器，以阻止它们匹配您不希望它们匹配的元素。例如（使用类选择器添加CSS样式）： inde

在我的应用程序中为p元素设置css样式只会影响IE11中lit元素中的p元素

我已经设置了一个非常基本的示例来说明这个问题。当你在IE11中打开它时，你会注意到自定义元素p文本是斜体，这种样式来自外部。在其他浏览器中，这种情况不会发生

这是一个已知的问题，IE11无法阻止吗？或者有没有办法解决这个问题？

我重复了我的问题，可能是IE浏览器的默认行为。因为外部CSS样式是全局样式

作为一种解决方法，您可以更改选择器，以阻止它们匹配您不希望它们匹配的元素。例如（使用类选择器添加CSS样式）：

index.html页面中的代码：

  <style>
    .outer-p { font-style: italic; }
  </style>
</head>
  <body>
    <p class="outer-p">Text outside element</p>
    <my-element></my-element>
  </body>


.outer-p{字体样式：斜体；}
元素外部的文本

自定义元素（my element.js）中的代码

MyElement类扩展了LitElement{
静态获取样式（）{
返回css`
.inner-p{显示：块；字体重量：900；颜色：#ff9900；}
`;
}
render（）{
返回html`
你好，世界！来自我的元素
`;
}
}

感谢您的回复。我本希望避免这种解决方案，但最终，这可能是唯一的办法。这是意料之中的。

ShadyCSS

polyfill将命名CSS以帮助防止它泄漏出去，但它不能做任何事情来防止全局CSS泄漏进来。

class MyElement extends LitElement {
  static get styles() {
    return css`
      .inner-p { display:block; font-weight: 900; color: #ff9900; }
    `;
  }

  render() {
    return html`
      <p class="inner-p">Hello world! From my-element</p>
    `;
  }
}