IE11中的点亮元素，自定义元素外部的css样式影响内部样式答案

【问题标题】：Lit element in IE11, css style outside custom element affects style insideIE11中的点亮元素，自定义元素外部的css样式影响内部样式
【发布时间】：2019-12-21 15:07:47
【问题描述】：

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

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

这是一个已知问题并且对于 IE11 无法避免吗？或者有什么办法可以解决这个问题？

【问题讨论】：

标签： css internet-explorer internet-explorer-11 lit-element

【解决方案1】：

我已经重现了我这边的问题，可能是IE浏览器的默认行为。因为外面的 CSS 样式是全局样式。

作为一种解决方法，您可以更改选择器以阻止它们匹配您不希望它们匹配的元素。如following sample（使用类选择器添加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>

自定义元素中的代码 (my-element.js)

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>
    `;
  }
}

【讨论】：

感谢您的回复。我希望避免这种解决方案，但归根结底，这可能是唯一的方法。
这是意料之中的。 ShadyCSS polyfill 将命名 CSS 以帮助防止其泄漏，但它无法阻止全局 CSS 泄漏。