0

I have added the Web component Polyfill.

npm install @webcomponents/webcomponentsjs

I have added them in my index.html file:

  <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>

Also Script for no suppport.

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

I get the data Web components not supported in IE 11.

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
user2924500
  • 17
  • 7
  • You are allowed to say No to customers: [The future of IE (official Microsoft announcement)](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/) I have been saying No for the past 3 years; spent the 30% time I no longer had to waste on IE in learning todays tech. I am happy, customers are happy, everyone wins. – Danny '365CSI' Engelman May 20 '21 at 14:41
  • Have you added the polyfills before any of your application code? They need to be loaded at the beginning of the code. Besides, you need to transpile your code into ES5 then use these polyfills. You can also refer to [this thread](https://stackoverflow.com/questions/47902255/are-web-components-actually-useable-in-ie11-and-edge) and [this article](https://medium.com/@xwatkins/making-vanilla-custom-elements-v1-work-in-ie11-64d3f09641b8). And don't load `custom-elements-es5-adapter.js` in IE 11, it is intended for browsers that support ES6. – Yu Zhou May 21 '21 at 05:30
  • @YuZhou I have added the comments as an answer. Here i have used a sample HTML file and js for web component – user2924500 May 21 '21 at 06:16
  • @user2924500 Hi, how about the issue? I've added the solution in my answer. May I know is my answer helpful to deal with the issue? – Yu Zhou May 27 '21 at 02:14

3 Answers3

0

I tried the same using Vanilla JS and HTMl

My Html code

 <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>

I have loaded the script from https://unpkg.com/@webcomponents/webcomponentsjs@2.5.0/webcomponents-loader.js.

I get the error in IE 11 console at Line number 2 in Js file

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

  </style>



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

Browser is not able to identify the template object even after using webcomponents-loader.js.

user2924500
  • 17
  • 7
0

When you reference webcomponents-loader.js in the page, IE will actually be compatible with the template element. Your problem is that you need to add the template element to the body after you create it, and if you need to add html elements to the body, you need to wait for it to load, so you need to execute these codes in window.onload().

A simple example:

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>

Result in IE:

enter image description here

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • Thanks for the reply. But with this approach i cannot use my custom element. I need a way to use it – user2924500 May 27 '21 at 08:47
  • How do you want to use ``? Do you want to add the content in the template to ``? If this is the case, it will work and the result is [like this](https://i.stack.imgur.com/MFXxk.png). If something else, could you please describe your problem in more detail? – Yu Zhou May 27 '21 at 10:01
0

My Web component element must look like this.

enter image description here

user2924500
  • 17
  • 7
  • You need to use the [`attachShadow()` function](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow) to turn the element into a shadow tree, and then add the required element to the tree. **Please check my edited answer for the example.** You can also refer to [this article](https://bitsofco.de/what-is-the-shadow-dom/) for more information. – Yu Zhou Jun 02 '21 at 02:15