Rendering Downshift in a ShadowRoot

downshift-shadow-root.js

// this check is borrowed from react
const isProxySupported =
  typeof Proxy === 'function' &&
  // https://github.com/facebook/react/issues/12011
  !Object.isSealed(new Proxy({}, {}));

function createProxyEnvironment(shadowRoot) {
  const doc = shadowRoot.ownerDocument;
  const properties = {
    document: doc,
    addEventListener: doc.addEventListener.bind(shadowRoot),
    removeEventListener: doc.removeEventListener.bind(shadowRoot),
  };
  // check if Proxy is supported because of IE and older Safari versions
  if (isProxySupported) {
    return new Proxy(shadowRoot, {
      get: (_, prop) => properties[prop],
    })
  }
  // fallback for es5-compatible environments (can be removed if it's unnecessary)                                                          
  return Object.create(shadowRoot, Object.keys(properties).reduce((res, key) => {
    res[key] = {
      get: () => properties[key],
    };
    return res;
  }, {}));
}