Я пытаюсь создать демонстрационное приложение с использованием микро-интерфейсов, используя подход веб-компонентов.Что мне нужно сделать, чтобы я мог использовать определенный пользовательский элемент из одного микро-интерфейса в слой сшивания?
Я уже прошел маршрут IFrame и использую single-spa, который работает, но на этот разЯ пытаюсь использовать веб-компоненты без удачи.Я также пытался добавить микро-интерфейс в контейнер докера, но это не принесло никаких изменений.
Я определяю свой пользовательский элемент в микро-интерфейсе следующим образом:
class CommentSection extends HTMLElement {
connectedCallback() {
ReactDOM.render(<App />, this.attachShadow({mode: 'open'}));
}
}
window.customElements.define('comment-section', CommentSection);
Я использую его в микро-интерфейсе index.html:
<comment-section></comment-section>
Пока все работает.Моя проблема возникает, когда я пытаюсь использовать его из слоя сшивания.
Из приложения 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'));
и из слоя сшивания, создавая прокси к микро-интерфейсу:
app.use(express.static(__dirname + '/public'));
const createProxy = (path, target) => {
app.use(path, proxy({ target, changeOrigin: true, pathRewrite: {[`^${path}`]: ''} }));
}
createProxy('/react', 'http://localhost:3000');
app.get('/', (req, res) => res.render('index'));
и импортируя его так же, как в строчке index.html:
<head>
<link href="/react" rel="import" async/>
</head>
<body>
<comment-section></comment-section>
</body>
Я ожидаювеб-компонент для рендеринга компонента реакции в слое сшивания, как это происходит, когда я запускаю микро-интерфейс изолированно, но фактический результат заключается в том, что весь код находится под тегом link html import, и ничего не отображается подтег веб-компонента.
микро-интерфейс веб-компонента 
слой сшивания веб-компонента 