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?
::partcan only style the DOM at the levelpart="contentwas defined (by the UI5 developers) it can not style elements down the tree, that would defeat the whole purpose of DOM parts.partORexportpartsfor this to work: The global attributepartmakes the element visible on just a single level of depth. When the shadow tree is nested, parts will be visible only to the parent of the shadow tree but not to its ancestor. Exporting parts further down is exactly whatexportpartsattribute is for. MDN exportparts