¿Por qué no puedo personalizar el estilo de las bibliotecas de componentes web, es decir, UI5, más allá de los temas? Probé de todo, desde diseñar en línea hasta envolver los componentes web en componentes con estilo. Intenté usar :host(), ::slott. He intentado inyectar etiquetas de estilo en la propia plantilla. Realmente estoy perdido, no pude cambiar un píxel de estilo. Me inclino por que el problema sea múltiples shadow dom o CSS encapsulado.
<TabContainer backgroundDesign={"red"} ref={ToggleRef} className={`webCompToggleTabBar`} id="UI5TabContainer" tabs-overflow-mode="StartAndEnd" collapsed fixed> {Object.keys(Tabs).map((subTemplate, i) => { return (<Tab className="webCompToggleTab" key={Math.random()} additional-text={subTemplate} name={subTemplate} />); </TabContainer>Ahora, el Tabcontainer externo se puede diseñar fácilmente con cualquier tipo de estilo, pero cuando intento diseñar cualquiera de las pestañas internas del TabContainer... grillos
Solo para mayor claridad, estoy creando un contenedor lit-html alrededor de bibliotecas de componentes web preconstruidas para trabajar con React y Angular. Pero necesito poder cambiar el estilo de los componentes web importados
por lo tanto, el problema con el estilo de los componentes web de las bibliotecas disponibles gratuitamente es:
Los componentes web generalmente se crean utilizando shadowDOM, esto es excelente para la encapsulación. Pero cuando quiera volver a entrar e intentar anular esa encapsulación y sobrescribir completamente el CSS de los componentes web. Se quedará atascado en la capa superior del componente web, justo fuera de shadowDOM (si lo está usando). Con algunas bibliotecas, esto se hace a propósito, otras le permiten hacer esto, pero es posible que tenga que desembolsar algo de dinero para usar esas bibliotecas.
Afortunadamente, hay algunas cosas que puede hacer para darle vida a los componentes web. Variables CSS, muchas bibliotecas crean variables CSS en sus componentes para la creación de temas. Entonces, una cosa que puede hacer es encontrar su lista de variables CSS en su página de Documentos o en la pestaña de elementos en su navegador y simplemente cortarlas y pegarlas.
Si esto no es suficiente para ti, hay otra opción. Puede crear sus propios componentes web de una manera muy similar a crearlos en ReactJS. Hay una herramienta llamada Stencil que le brinda una forma de crear un componente web usando mecanografiado y CSS. Stencil resolvió todos mis problemas, tiene todos los polyfills incorporados. Configura todas sus pruebas e implementaciones. https://stenciljs.com/