时间戳

首页 > 解决方案 > IE11中的点亮元素，自定义元素外部的css样式影响内部样式

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

问题描述

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

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

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

标签： cssinternet-explorerinternet-explorer-11lit-element

解决方案

我已经重现了我这边的问题，它可能是 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>

自定义元素中的代码 (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>
    `;
  }
}

推荐阅读