Support for IE11

[wildhoney]

Support for IE11

[aliblackwell]

Hi @dcapilla, I had the same issue. Fixed it by npm installing [email protected]. Version 17 uses a Proxy which isn't supported by IE11. I messed around for ages trying to polyfill Proxy and then realised I could just use an older version.

Finally, rather than attempt to polyfill Shadow Dom for IE11, I ended up with the following wrapper component that detects support for attachShadow and only serves the ShadowDOM component if it's there:

import React from 'react';
import ShadowDOM from 'react-shadow';

function ShadowDomFactory(props) {
    function shouldUseShadowDom() {
        return typeof document.body.attachShadow === 'function';
    }

    return (
        <>
            {shouldUseShadowDom() ? (
                <ShadowDOM>{props.children}</ShadowDOM>
            ) : (
                <div>{props.children}</div>
            )}
        </>
    );
}

export default ShadowDomFactory;

Hope this helps!

[Wildhoney]

Thanks @aliblackwell

We had a pull request a while ago that added support for polyfilling Proxy.

[marijnbent]

So what is the current workflow to add compatibility for older browsers? In an older issue, backwards compatibility was added #(30), but is removed since 17?

[Wildhoney]

Does the polyfill referenced in #30 not work any more @marijnbent? The only other thing we had in the older version was it supported an older versions of shadow boundaries (v0), which this one doesn't. The polyfill should handle that difference perfectly fine itself.