在我的应用程序中为 p 元素设置 css 样式只会影响 IE11 中 lit 元素内的 p 元素。
我已经设置了一个非常基本的 stackblitz显示问题的示例。当您在 IE11 中打开它时，您会注意到自定义元素 p 文本是斜体的，该样式来自外部。在其他浏览器中，这不会发生。
对于 IE11，这是一个已知问题并且无法阻止吗？或者有什么办法可以解决这个问题？
最佳答案
我已经在我这边重现了这个问题，这可能是 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>
`;
}
}
关于css - IE11 中的 Lit 元素，自定义元素外部的 css 样式影响内部样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57505188/