Web 组件多边形填充在 IE 11 中不起作用。我在 index.html 文件中添加了多边形填充 JS 文件答案

【问题标题】：Web component Poly fills are not working in IE 11. I have added the poly fill JS file in index.html fileWeb 组件多边形填充在 IE 11 中不起作用。我在 index.html 文件中添加了多边形填充 JS 文件
【发布时间】：2021-05-20 09:11:21
【问题描述】：

我已经添加了 Web 组件 Polyfill。

npm install @webcomponents/webcomponentsjs

我已将它们添加到我的 index.html 文件中：

  <script src="./webcomponents/custom-elements-es5-adapter.js"></script>
  <script src="./webcomponents/webcomponents-bundle.js"></script>
  <script src="./webcomponents/webcomponents-loader.js"></script>
  <script src="./webcomponents/webcomponents-bundle.js.map"></script>

也是不支持的脚本。

 <script>
   if (!window.customElements){document.write('Web components not supported');       alert('hi');
    console.log('No web component');
   }

我得到了 IE 11 不支持的数据 Web 组件。

【问题讨论】：

你可以对客户说不：The future of IE (official Microsoft announcement)过去3年我一直在说不；花 30% 的时间让我不再需要浪费在 IE 上来学习当今的技术。我很高兴，客户很高兴，每个人都赢了。
您是否在任何应用程序代码之前添加了 polyfill？它们需要在代码的开头加载。此外，您需要将代码转换为 ES5，然后使用这些 polyfill。也可以参考this thread和this article。并且不要在 IE 11 中加载 custom-elements-es5-adapter.js，它适用于支持 ES6 的浏览器。
@YuZhou 我已经添加了 cmets 作为答案。在这里，我使用了一个示例 HTML 文件和用于 Web 组件的 js
@user2924500 嗨，这个问题怎么样？我已经在我的答案中添加了解决方案。请问我的回答对解决这个问题有帮助吗？

标签： internet-explorer-11 web-component

【解决方案1】：

我用 Vanilla JS 和 HTMl 尝试了同样的方法

我的 HTML 代码

 <html>

   <style>

 



<head>


<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.5.0/webcomponents-

loader.js">

  <script>
   if (!window.customElements){document.write('Web components not supported');       
  alert('hi');
    console.log('No web component');
    }else{
   alert('Web componnets is supported');
   }

  </script> 
 </head>

  <body>



 **<my-shadow></my-shadow>**

 <script src="C:\Users\rgo7cob\Desktop\shadow.js"></script>

     <h3> Hello. It is in Red </h3>
  </body>

   </html>

我已经从https://unpkg.com/@webcomponents/webcomponentsjs@2.5.0/webcomponents-loader.js加载了脚本。

我在 IE 11 控制台的 Js 文件的第 2 行收到错误

      const template =document.createElement('template');
     **template.innerHTML=`**
    <style>
      h3{
color : blue;
    }

  </style>



    <h3> This is  data from the Template and it is blue</h3>

即使使用 webcomponents-loader.js，浏览器也无法识别模板对象。

【讨论】：

【解决方案2】：

我的 Web 组件元素必须如下所示。

【讨论】：

您需要使用attachShadow() function 将元素变成阴影树，然后将需要的元素添加到树中。 请查看我为示例编辑的答案。您也可以参考this article了解更多信息。

【解决方案3】：

当你在页面中引用webcomponents-loader.js时，IE实际上会兼容模板元素。你的问题是，你需要在创建body之后添加模板元素，如果需要在body中添加html元素，则需要等待加载，所以需要在@987654324中执行这些代码@。

一个简单的例子：

window.onload = function() {
  const template = document.createElement('template');
  template.innerHTML = "<h3>This is a template.</h3>";
  document.body.appendChild(template);
}

function show() {
  var shadowEle = document.getElementById('shadow1');
  var shadow = shadowEle.attachShadow({
    mode: 'open'
  });
  //add style
  const styles = document.createElement("style");
  styles.textContent = 'h3{ color:blue; }';
  shadow.appendChild(styles);
  //add h3 title
  const title = document.createElement("h3");
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  title.textContent = clon.childNodes[0].textContent;
  shadow.appendChild(title);
}
if (!window.customElements) {
  document.write('Web components not supported');
  alert('hi');
  console.log('No web component');
} else {
  alert('Web componnets is supported');
}

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.5.0/webcomponents-loader.js"></script>
<input type="button" name="show" id="show" value="show template" onclick="show()" />
<br />
<my-shadow id="shadow1">
</my-shadow>

在 IE 中的结果：

【讨论】：

感谢您的回复。但是通过这种方法，我无法使用我的自定义元素。我需要一种使用它的方法
你想如何使用<my-shadow>？是否要将模板中的内容添加到<my-shadow>？如果是这种情况，它将起作用，结果是like this。如果还有其他问题，您能否更详细地描述您的问题？