如何通过Shadow-Dom将全局CSS应用于Web组件

Question

我正在从事一个Lit元素项目，我遇到了一个问题，即reset.css不能应用于用shadow-root

包装的Web组件

我已经尝试过，我得到了以下错误。

Refused to apply style from 'http://localhost:8080/style/static/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

我尝试的代码是：

<script>
  var css = new CSSStyleSheet()
  css.replace('@import url("./style/static/reset.css")')
  document.adoptedStyleSheets = [css]
</script>

将其放入HTML文件中。

如何避免此错误，并将reset.css应用于Web组件？

Answer 1

是否有助于将替换导入应用于ShadowRoot而不是文档？

？

const node = document.createElement('div')
const shadow = node.attachShadow({ mode: 'open' })
shadow.adoptedStyleSheets = [sheet]

https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets

编辑 - 清晰的加法：

上面的地址在您的原始问题所指的框架上应用@Import语句可能包含@Import语句的样式表，因为您的代码试图将实例化的表应用到文档，我，问题变得有点朦胧。

您指出的错误似乎表示代码，该代码试图应用另一个文档中创建的样式表：

如果您尝试采用在另一个文档中构建的CSSSTYLESHEET，则将抛出" notalederror" domexception。

https://github.com/wicg/construct-stylesheets/blob/gh-pages/explainer.md