Search code examples
javascripthtmlreactjsweb-componentui5-webcomponents

Why cant I customize the styling of web component libraries, beyond themes? saps UI5

Why can't I customize the styling of web component libraries i.e UI5, beyond themes? I have tried everything from inline styling to wrapping the web components in Styled-components. I tried using :host(), ::slott. I've tried to inject style tags into the template itself. I'm really at a loss, I wasn't able to change one pixel of styling. I'm leaning towards the issue being multiple shadow dom or encapsulated CSS.

 <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>

Now the outer Tabcontainer is easilystyled with any type of styling, but when I attempt to style any of the tabContainer's inner Tabs...crickets

Just for clarity, I am building a lit-html wrapper around pre-built web-component libraries to work with React and Angular. But I need to be able to restyle the imported web-components

Solution

  • so the issue with styling web components from freely available libraries are:

    1. Web components are usually created using the shadowDOM, this is great for encapsulation. But when you want to go back in and try to override that encapsulation and completely overwrite the web components CSS. You will get stuck in the top layer of the web component, just outside it's shadowDOM(if there using it). With some libraries, this is done on purpose, others allow you to do this but you may have to fork over some hefty cash to use those libraries.

    2. Fortunately, there are some things you can do to spice up the web- components. CSS variables, A lot of libraries build CSS variables into their components for theming. So one thing you can do is find their list of CSS variables either on their Documents page or in the elements tab in your browser and just cut and paste them in.

    3. If this is not enough for you there is another option. You can create your own web components in a way very similar to creating them in ReactJS. There is a tool called Stencil which gives you a way to create web component using typescript and CSS. Stencil solved all my issues, it has all the polyfills built in. It sets up all your testing and deploying. https://stenciljs.com/