Я пытаюсь создать демонстрационное приложение с использованием микро-интерфейсов с использованием подхода веб-компонентов. Что мне нужно сделать, чтобы я мог использовать определенный пользовательский элемент из одного микро-интерфейса в слое сшивания?
Я уже выбрал путь 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 и ничего не отображается под тегом веб-компонента.
микро-интерфейс веб-компонента 
слой сшивания веб-компонентов
<script src="https://your-server/static/js/xxx.js"></script>17.05.2019