Seguí un tutorial de Maximillion ("Udemy") sobre componentes web y Stencil. Intenté agregar un código idéntico a mi entorno de desarrollo en una "aplicación de producción" y un nuevo proyecto "CRA (crear aplicación de reacción)".
¿Los resultados fueron que la "aplicación de producción" solo devolvió elementos HTML desnudos? ¿Sin sombra dom adjunta?
Ahora, el nuevo CRA pudo cargar y renderizar los componentes web a la perfección.
Estoy tratando de entender por qué sucede esto. Tengo la sospecha de que puede ser una cosa del paquete web, pero no estoy seguro.
Para reiterar el punto, ¿por qué el shadow dom no se procesa en mi aplicación de producción pero se procesa en mi aplicación POC de muestra?
En realidad, esta fue una solución simple, había seguido el Tutorial y los documentos al agregar esto:
import { defineCustomElements } from 'web-components/loader/index.js'; defineCustomElements(window)no a la página index.js como se indica --- este es el patrón recomendado --
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { defineCustomElements } from 'web-components/loader/index.js'; defineCustomElements(window) const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) defineCustomElements(window); reportWebVitals();Esto no funcionó para mí en mi proyecto actual, pero funcionó muy bien para mí con un proyecto de construcción de CRA limpio y agradable.
Lo que terminé teniendo que hacer fue mover este código---
import { defineCustomElements } from 'web-components/loader/index.js'; defineCustomElements(window)a la parte superior de mi archivo de enrutador de reacción, luego funcionó perfectamente. Esto puede deberse al enrutador de reacción.
// AboutPage/index.js import { Switch, Route } from 'react-router-dom'; import App from '../compopnents/App'; import { defineCustomElements } from 'web-components/loader/index.js'; defineCustomElements(window) function AboutPage() { return ( <Switch> <Route path="/deals" component={ App } /> </Switch> ); }