[docs] Add Shadow DOM guide #33007
[docs] Add Shadow DOM guide #33007
Conversation
|
|
||
| ### 2. Theme | ||
|
|
||
| MUI components like `Menu`, `Dialog`, `Popover` and others use [React Portal](https://reactjs.org/docs/portals.html) to render a new "subtree" in a container outside of current DOM hierarchy. |
There was a problem hiding this comment.
Replacing MUI with Material UI to be more specific.
Should we replace this Portal link with our own Portal docs? (If so, we still need to update the Material UI portal docs to match the Base portal docs.)
| MUI components like `Menu`, `Dialog`, `Popover` and others use [React Portal](https://reactjs.org/docs/portals.html) to render a new "subtree" in a container outside of current DOM hierarchy. | |
| Material UI components like `Menu`, `Dialog`, `Popover` and others use [React Portal](https://reactjs.org/docs/portals.html) to render a new "subtree" in a container outside of current DOM hierarchy. |
There was a problem hiding this comment.
Replacing MUI with Material UI to be more specific.
I would keep MUI, since it's relevant for MUI X and probably for Joy (in the future)
Should we replace this Portal link with our own Portal docs?
Sure 👍
There was a problem hiding this comment.
I would keep MUI, since it's relevant for MUI X and probably for Joy (in the future)
More and more I'm getting hints for an MUI-company-wide documentation 👁️ 👀 🙄
(stuff that isn't particular to one or two products but rather a company-wide philosophy/convention/approach)
There was a problem hiding this comment.
Huh, I didn't even realise that this guide will be only available in Material UI docs.
I think a lot of pages from "How To Guides" menu section could make sense in other MUI Core products, and sometimes in MUI X as well.
We'll definitely need top-level docs at some point.
| ### 2. Theme | ||
|
|
||
| MUI components like `Menu`, `Dialog`, `Popover` and others use [React Portal](https://reactjs.org/docs/portals.html) to render a new "subtree" in a container outside of current DOM hierarchy. | ||
| By default, this container is `document.body`. But since the styles are applied only inside of the Shadow DOM, we need to render portals inside the Shadow DOM container as well: |
There was a problem hiding this comment.
| By default, this container is `document.body`. But since the styles are applied only inside of the Shadow DOM, we need to render portals inside the Shadow DOM container as well: | |
| By default, this container is `document.body`. | |
| But since the styles are applied only inside of the shadow DOM, we need to render portals inside the shadow DOM container as well: |
There was a problem hiding this comment.
Newline doesn't make a difference in markdown.
Did you mean to split it into two paragraphs? An additional empty line is needed then
There was a problem hiding this comment.
I like to see each sentence on a new line to make it simpler to comment on individual sentences (rather than paragraphs). Sorry I should have explained that! It's a pattern that I think I saw @oliviertassinari enforce when I started contributing to the docs. Might be worth adding as a prettier rule if it's something we really want to standardize.
There was a problem hiding this comment.
Ah, so you meant just a line break in markdown, right?
There was a problem hiding this comment.
@cherniavskii great job and initiative for adding this guide 🙏
|
|
||
| In the example below you can see that the component outside of the shadow DOM is affected by global styles, while the component inside of the shadow DOM is not: | ||
|
|
||
| {{"demo": "ShadowDOMDemo.js", "defaultCodeOpen": false}} |
There was a problem hiding this comment.
I did a few changes around this demo in #33122
| @@ -208,6 +208,7 @@ const pages = [ | |||
| { pathname: '/material-ui/guides/content-security-policy', title: 'Content Security Policy' }, | |||
| { pathname: '/material-ui/guides/right-to-left', title: 'Right-to-left' }, | |||
| { pathname: '/material-ui/guides/flow' }, | |||
There was a problem hiding this comment.
I think that we could drop this page, it's outdated now. I have taken note in https://www.notion.so/mui-org/Opportunities-408a9771556a4715830d18f3749af753#167b4a8cef8e44e2a31c9c2568ec12fb.
Closes mui/mui-x#5030
Closes #17473
Closes #31188
Also addresses already closed issues:
Preview: https://deploy-preview-33007--material-ui.netlify.app/material-ui/guides/shadow-dom/