TypeError：Safari 中 CSSStyleSheet 的构造函数非法

Question

我正在 NodeJS 中制作一个 JS 应用程序并使用 Webpack 构建它。

我主要使用Web Components，并且有多个这样的组件：

import style from "./inboxScreen.css" assert { type: "css" };

export class InboxScreen extends HTMLELement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" })

    this.shadowRoot.adoptedStyleSheets.push(style);

    this.shadowRoot.innerHTML = `
    `;
  }
}

customElements.define("inbox-screen", InboxScreen);

该应用程序在 Chrome 中运行良好，但 safari 给我一个类型错误；非法构造函数

这对我来说都是精简的胡言乱语，但错误行是这样的：

                o.replaceSync(r.toString()); // illegal constructor
                const l = o
            },

我的webpack配置规则是这样的：

    rules: [
      {
        assert: { type: "css" },
        loader: "css-loader",
        options: {
          exportType: "css-style-sheet",
        },
      },
    ],
  },

我读到 safari 不支持断言 { type: "css" };语法，但是有没有办法让它工作，也许在 webpack 配置中？

Answer 1

我相信这就是您问题的答案：`扩展 HTMLSpanElement 时未捕获的类型错误：非法构造函数。。

与CSS无关，这个JS运行时问题。你需要添加一个polyfill，因为Apple就是Apple，不想添加对

HTMLElement

的完整支持。

注意！ 原始答案指向的 polyfill 项目已移至另一个存储库。 这是链接。