polymer - 如何通过 shadow-dom 将全局 css 应用到 web 组件

Question

我正在做一个 lit-element 项目，但我遇到了一个问题 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 语句的样式表应用到原始问题所指的框架上的问题，即阴影根节点(元素)，但是，因为您的代码尝试将实例化的表应用于文档，对我来说，问题变得有点模糊。

您指出的错误似乎表明代码尝试应用在另一个文档中创建的样式表:

If you try to adopt a CSSStyleSheet that's constructed in a different Document, a "NotAllowedError" DOMException will be thrown.

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