ui5 webcomponents: Custom style webcomponent doesnt work

32 views Asked by At

Custom style for webcomponent ui5-tabcontainer doesnt work.

The doc says:

... allow developers to style elements inside the Shadow DOM. The ui5-tabcontainer exposes the following CSS Shadow Parts: content - Used to style the content of the component

This is what i've done (vue application):

// template.tpl
<nav id="dummyIdent">
    <ui5-tabcontainer 
        fixed
        collapsed
        data-sap-ui-fastnavgroup="true" 
        header-background-design="Transparent"
        tab-layout="Inline"
        @tab-select="navClicked">
        <ui5-tab      
            tooltip="Text"
            icon="notes"
            text="text">
        </ui5-tab>
    </ui5-tabcontainer>
</nav>

// style.scss
#dummyIdent {
    background: #eff4f9;
    ui5-tabcontainer::part(content) {
        opacity: 0;
        color: brown;
        .ui5-tab-strip-item-icon-outer {
            background: red;
        }
    }
}

I expect changes of the default style, but nothings happens.
The goal is to change the background of the icon provided by the ui5-tab inside the ui5-tabcontainer

Why the css config doesn't work? What do i wrong?

0

There are 0 answers