HTMLSlotElement is not defined on Edge

[lvandernoll]

I'm trying to implement Edge & IE11+ support on my React Typescript website. I'm loading the elements in my src/index.tsx like this:

import 'wired-elements';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'wired-card': any,
      'wired-button': any,
      'wired-image': any,
    }
  }
}

In the head of public/index.html, I added the following for polyfills:

<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>

I have tried a whole lot of combinations for polyfills and loading the wired-elements with no success. Is there anyone else with these issues?

[apennamen]

Hello! I've not run into the issue myself, but is this library the only webcomponent library you have a problem with on Edge ? (Meaning is there something to be done specially in wired-element library ?)

Some links to help (sorry if you tried this already), starting from the answer in this stackoverflow issue, and from the webcomponent polyfill repo, there is this note:

For polyfills that work with HTML Imports, see the v1 branch of the webcomponentsjs repo. https://github.com/webcomponents/webcomponentsjs/tree/v1

My wild guess would be the webcomponent loader used does not include the polyfill needed. Regards

[lvandernoll]

Hey there,

I tried every stackoverflow solution there is, so also that one. After digging into it some deeper I found that only the Tabs component uses HTMLSlotElement, which I do not use, so I loaded all components I needed separately. Now the page loads on both IE and Edge! Enter my next issue: https://i.gyazo.com/20b2b12fa9d71ef3325c4aa1cf08535e.mp4 Both Edge and IE seem to only apply any size and fill color to the wired-box and wired-image once the window gets resized. As you can see in de video, the header changes size with CSS and the wired-box only updates this on resizing. Now, if this doesn't get solved I could always just replace the wired boxes with normal bordered blocks only in these browsers through JS, but it looks great!

Thanks for your help!

[pshihn]

If you wish to re-render the component after applying some styles you can call requestUpdate() method on any element or wiredRender(true) to force the rendering on most elements