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?