在 React 项目中使用 Shadow DOM答案

【问题标题】：Use Shadow DOM in react project在 React 项目中使用 Shadow DOM
【发布时间】：2022-08-24 13:13:18
【问题描述】：

我正在构建一个小部件。

我的小部件在每个网站上的行为都不同，因为父网站 CSS 正在影响小部件元素。

所以我打算把所有东西都移到影子 DOM 上。但是没有使用过 Shadow DOM，我的前端技能不是那么好。所以会很感激你的帮助。

我的 App.tsx 看起来像这样

export const App = ({ element, ...appSettings }: Props) => <Main />;

主文件如下所示。

Style.root 将小部件定位在特定位置，例如中上或中下。

 return (
        <div>
            <div className=${style.root}>
                <div>
                    <div
                        className={style.container}
                    >
                        <WidgetTypes
                          data={data}
                        />
                    </div>
                </div>
            </div>:

WidgetType 组件看起来像这样

if(type=small)
return <WidgetSmall>

if(type=large)
return <WidgetLarge>

因为这是一个小部件。我想将整个 React 应用程序移动到 Shadow DOM 中。我尝试过像这样移动应用程序但无法正常工作

const hostContainer = document.getElementById(\'rootouter\');

hostContainer?.attachShadow({mode:\"open\"}).append(...hostContainer.childNodes)

type Props = Configurations;
export const App = ({ element, ...appSettings }: Props) => <Main id=\"rootouter\" />;

也许wpeform.io/blog/render-react-app-shadow-dom-styled-components 会有所帮助。就目前而言，这是一个太宽泛的问题，无法在 SO 中回答。
这是一个相当广泛的问题，将所有内容都转移到影子 DOM。关于做部分内容存在一些问题。例如，Shadow DOM and ReactJS 专门询问如何将 React 组件渲染到影子 DOM 中……也许您可以通过展示您在研究中阅读过的文章来提供帮助？
@HereticMonkey 这是我找到的简单文章 -> (dev.to/tryeladd/preact-in-the-shadow-dom-ao8) 并做了一些事情但出现了错误。我已经用类似的方法更新了我的问题，不知道这是否是正确的方法
@GabrielePetrioli 如果我尝试将整个 App 组件移动到像 (dev.to/tryeladd/preact-in-the-shadow-dom-ao8) 这样的应用程序中会怎样。我已经通过更改更新了问题。它有效吗？
警告的话，如果您将框架与 Web 组件混合使用，那么每当框架获得更新时，您将永远必须测试您的代码。如果你使用 100% vanilla JS Web Components，它们将在接下来的 27 年 JS 中毫无问题地运行。你必须做数学，今天发展“更快”，从长远来看可能代价高昂。一页中的不同 JQuery 版本运行良好，将来一页中的不同框架/版本会运行良好吗？

标签： reactjs shadow-dom

【解决方案1】：

我使用 webpack 和 Express 实现了同样的目标。我使用 webpack 捆绑所有内容，并使用 Express 将其托管在服务器上，并将其用于不同的本机 Web 应用程序。你可以通过简单的 Bing 搜索轻松找出这些东西。设置 webpack 是一项繁琐的工作。它会占用你几天的时间，但它是标准的东西，有助于将整个反应项目托管在一个包中。

【讨论】：