使用模板开发的 Web 组件在 IE11 中不起作用答案

【问题标题】：Web component developed using stencil not working in IE11使用模板开发的 Web 组件在 IE11 中不起作用
【发布时间】：2022-01-03 13:06:41
【问题描述】：

我开发了一些模板组件，但在生产后构建了包含在纯 HTML 中的 dist js 并将组件用作

<my-comp></my-comp>

在那里不工作，在严格模式下不允许在“包含”上调用删除时出错。

下面是我的模板配置

import { Config } from '@stencil/core'
import { sass } from '@stencil/sass'
export const config: Config = {
  namespace: 'mep-components',
  srcDir: 'src',
  buildEs5: true,
  extras: {
    cssVarsShim: true,
    dynamicImportShim: true,
    shadowDomShim: true,
    safari10: true,
    scriptDataOpts: true,
    appendChildSlotFix: false,
    cloneNodeFix: false,
    slotChildNodesFix: true,
  },
  outputTargets: [
    {
      type: 'dist'
    },
    {
      type: 'www'
    }
  ],
  devServer: {
    reloadStrategy: 'pageReload',
    port: 4444
  },
  plugins: [sass()]
}

下面是包JSON package.json

{
  "name": "web-components",
  "module": "./dist/index.js",
  "collection": "./dist/collection/collection-manifest.json",
  "types": "./dist/types/components.d.ts",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/index.cjs.js",
  "scripts": {
    "start": "stencil build --dev --watch --serve",
    "build": "stencil build --prod && node ./src/tasks/after.build.js",
    "server": "json-server --watch db.json",
    "task": "node ./src/tasks/someTask.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@stencil/core": "^2.6.0",
    "moment-timezone": "^0.5.33",
    "stencil-click-outside": "^1.7.1",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@stencil/sass": "^1.4.1",
    "@types/jquery": "^3.5.6",
    "chalk": "^4.1.2",
    "workbox-build": "^4.3.1"
  }
}

【问题讨论】：

这应该不是问题，IE11 已经死了，被埋没了，它的供应商多年前就放弃了它。
有什么可以用polyfilling做的吗
使用 Google，过去使用过很多 polyfill。我最好的建议：拒绝从事 IE 项目。你将不得不付出两次代价，一次是因为必须使用过时的技术，一次是因为你没有学习现代的东西。
您是否使用过the extras config 来支持旧版浏览器？默认情况下，Stencil 不能在 IE11 上运行，但使用 polyfill 可以支持 IE11。通过使用 extras 配置，旧版浏览器可以下载并运行 polyfill。
@YuZhou 我在问题中使用了额外的配置更新了相同的看看。

标签： javascript internet-explorer-11 web-component polyfills stenciljs

【解决方案1】：

Stencil 2.0 中的一项重大更改是默认禁用对 Internet Explorer 11 的支持，现在可以选择加入。您需要手动启用它。

https://github.com/ionic-team/stencil/blob/main/BREAKING_CHANGES.md#opt-in-for-ie11-edge-16-18-and-safari-10-builds

【讨论】：