WebComponents Support in IE 11 - PolyFills

Question

I've got a web component working in chrome. I am trying to get it to show up in IE 11.

I've added this line in my main index page:

<script type="text/javascript" src="app/shared/headerComponent/webcomponents-lite.js"></script>

I have copied file to said directory. After I rebuild and deploy my site, I am not seeing the web component in IE, in Chrome it shows OK.

Am I missing something?

Update 9/6/2017

I am now getting this error:

File: webcomponents-lite.js, Line: 137, Column: 460 Unable to get property 'documentElement' of undefined or null reference

Line is this:

var a=this.ownerDocument;if(a&&a.contains&&a.contains(this)||(a=a.documentElement)&&

So, it looks like the polyfill is loading but not executing properly. Also, I put in some console.log in the connected and disconnected call backs and they are not being called as well.

Answer 1

I added these polyfill(s)/libraries:

<script type="text/javascript" src="app/shared/headerComponent/webcomponents-lite.js"></script>
<script type="text/javascript" src="app/shared/headerComponent/custom-elements.min.js"></script>

Also, placement makes a difference. I put these right after the head tag. After the body was not working as DOM manipulation needs to happen.

I added the custom-elements.min.js since we were using the v1 spec of the custom elements as well.

After this, the web components were visible in IE 11.