[Modal] ShadowDOM TypeError: node.setAttribute is not a function at ariaHidden (ModalManager.js:21)

[Jack-Works]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

throw at

export function ariaHidden(node, show) {
  if (show) {
    node.setAttribute('aria-hidden', 'true'); // node.setAttribute is not a function
  } else {
    node.removeAttribute('aria-hidden');
  }
}

Context 🔦

I'm rendering Modals into ShadowRoot and ShadowRoot is DocumentFragment instead of Node so there is no setAttribute or removeAttribute on it.

If you curious how I render the React Portal into ShadowRoot, that's not supported by React yet (a patch has been submitted to React), see https://github.com/DimensionDev/Maskbook/blob/master/src/utils/jss/ShadowRootPortal.tsx

[oliviertassinari]

@Jack-Works Interesting, could you share mroe details on the motivation behind rending the Modal in a shadow node as well as a minimal reproduction? Thanks

[Jack-Works]

@Jack-Works Interesting, could you share mroe details on the motivation behind rending the Modal in a shadow node as well as a minimal reproduction? Thanks

I'm working with a project that needs to render any content in the ShadowRoot to get security. Our environment can ensure prototype of ShadowRoot will not be corrupted.

This is how I render Modal into ShadowRoot. And you can notice all stylesheets lost (I've fixed it in my project by rewrite JSS renderer).

// Open this URL
// data:text/html,<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

const div = document.createElement('div')
document.body.appendChild(div)
const PortalShadowRoot = div.attachShadow({ mode: 'closed' })

Object.defineProperties(ShadowRoot.prototype, {
    // I've already fix this issue by these two lines
    setAttribute: { value() {} },
    removeAttribute: { value() {} },
    nodeType: {
        get() {
            if (this === PortalShadowRoot) return 1
            else return Object.getOwnPropertyDescriptor(Node.prototype, 'nodeType').get.call(this)
        },
    },
    tagName: {
        get() {
            if (this === PortalShadowRoot) return 'div'
            else return undefined
        },
    },
    style: {
        get() {
            if (this === PortalShadowRoot) return div.style
            else return undefined
        },
    },
})

function x() {
    const [open, setOpen] = React.useState(true)
    return React.createElement(MaterialUI.Modal, { portal: PortalShadowRoot, open: open}, React.createElement('h1', { onClick() {setOpen(false)} }, 'click to close'))
}
ReactDOM.render(React.createElement(x), div)

[oliviertassinari]

It's related to #17473