Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Rendering Downshift in a ShadowRoot
// 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;
}, {}));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.