Javascript 如何从缝合层的微型前端重用定义的web组件？_Javascript_Node.js_Reactjs_Web Component_Micro Frontend

Javascript 如何从缝合层的微型前端重用定义的web组件？

javascript node.js reactjs

Javascript 如何从缝合层的微型前端重用定义的web组件？,javascript,node.js,reactjs,web-component,micro-frontend,Javascript,Node.js,Reactjs,Web Component,Micro Frontend,我正在尝试使用微前端创建一个演示应用程序，采用web组件的方法。我需要做什么才能使用定义的自定义元素从一个微型前端进入缝合层我已经采用了IFrame路线，并使用了单spa，这两种方法都可以使用，但这次我尝试使用web组件，运气不好。我还尝试将micro前端添加到docker容器中，但没有带来任何变化我在micro frontend中定义自定义元素，如下所示： class CommentSection extends HTMLElement { connectedCallback() {

我正在尝试使用微前端创建一个演示应用程序，采用web组件的方法。我需要做什么才能使用定义的自定义元素从一个微型前端进入缝合层

我已经采用了IFrame路线，并使用了单spa，这两种方法都可以使用，但这次我尝试使用web组件，运气不好。我还尝试将micro前端添加到docker容器中，但没有带来任何变化

我在micro frontend中定义自定义元素，如下所示：

class CommentSection extends HTMLElement {
  connectedCallback() {
    ReactDOM.render(<App />, this.attachShadow({mode: 'open'}));
  }
}
window.customElements.define('comment-section', CommentSection);

到目前为止一切正常。我的问题来了，当我试图使用它从缝合层

从React应用程序中，我创建了一个

server.js

文件来传递内容：

server.get('/', (req, res) => {
  const htmlPath = path.resolve(__dirname, 'build', 'index.html');

  fs.readFile(htmlPath, 'utf8', (err, html) => {
    const rootElem = '<comment-section>';
    const renderedApp = renderToString(React.createElement(App, null));

    res.send(html.replace(rootElem, rootElem + renderedApp));
  });
});

server.use(express.static('build'));

然后在缝合

index.html

中像这样导入它：

<comment-section></comment-section>

<head>
  <link href="/react" rel="import" async/>
</head>
<body>
  <comment-section></comment-section>
</body>

我希望web组件在缝合层中呈现react组件，就像我单独运行micro frontend时一样，但实际结果是所有代码都在

链接

html导入标记下，web组件标记下没有呈现任何内容

web组件微前端

web组件缝合层

你的例子看起来太复杂了。Web组件由两部分组成：自定义元素和定义它的脚本

因此，要呈现Web组件，您只需将脚本添加到目标html中，

在您的示例中，仅此而已。无需码头工人、代理等

换句话说：您应该在任何地方使用Web组件，就像在“micro frontend”index.html文件中一样

关于这一点，

：HTML导入已被弃用（Chrome:Firefox:）

您的示例看起来过于复杂。Web组件由两部分组成：自定义元素和定义它的脚本

因此，要呈现Web组件，您只需将脚本添加到目标html中，

在您的示例中，仅此而已。无需码头工人、代理等

换句话说：您应该在任何地方使用Web组件，就像在“micro frontend”index.html文件中一样

关于这一点，

：HTML导入已被弃用（Chrome:Firefox:）

我理解你的观点，我确实提到了我确实找到了一些可行的解决方案，但不幸的是，它们忽略了我试图实现的全部要点。我尝试从远程位置加载web组件，而不是本地js文件。我已经在上面的截图中展示了工作解决方案和我的问题之间的区别。我不确定我是否说得够清楚，但希望我说得够清楚。从哪里加载javascript并不重要。一个非常常见的用法是将javascript文件放在一些内容交付网络上。从您想要的任何地方加载javascript，并使用自定义元素标记，它就可以正常工作。只需将相对的src url替换为绝对url即可，即

我理解您的观点，并且我确实提到了我确实找到了一些可行的解决方案，但不幸的是，它们忽略了我试图实现的全部要点。我尝试从远程位置加载web组件，而不是本地js文件。我已经在上面的截图中展示了工作解决方案和我的问题之间的区别。我不确定我是否说得够清楚，但希望我说得够清楚。从哪里加载javascript并不重要。一个非常常见的用法是将javascript文件放在一些内容交付网络上。从您想要的任何地方加载javascript，并使用自定义元素标记，它就可以正常工作。只需将相对src url替换为绝对url即可，即

<head>
  <link href="/react" rel="import" async/>
</head>
<body>
  <comment-section></comment-section>
</body>