Within an Angular project, I am attempting to modify the border-top attribute of the pseudo-class :host associated with the component called p-table-row. This specific component is part of a library created by Porsche and can't be directly edited. View the visual representation here:
https://i.sstatic.net/gG9Ec.png
Several CSS selectors were tested but none proved effective.
p-table-row {
border-top: 1px solid red !important; // see image above
}
p-table-body {
border-top: 1px solid red !important;
}
:host(p-table-body) {
border-top: 1px solid red !important;
}
:host(p-table-row) {
border-top: 1px solid red !important;
}
p-table-row :host {
border-top: 1px solid red !important;
}
Considering utilizing a query selector to alter this attribute, however, unsure how to target the :host class.
Regrettably, unable to provide a stackblitz demo due to compatibility issues with the current library.
UPDATE: With modifications based on the guidance from Danny '365CSI' Engelman's answer.
CSS: Define border-top as desired.
p-table p-table-row:first-of-type {
border-top: 1px solid $color-porsche-red-dark;
}
Typescript: Set native border-top to null to allow custom css rules to take precedence (directly setting desired value did not achieve the result). Take note that cssRules[0] corresponds to the :host element (ideally should be selected by name).
ngAfterViewInit(): void {
setTimeout(() => {
document
.querySelectorAll('p-table p-table-row:first-of-type')
.forEach(el => (el.shadowRoot.adoptedStyleSheets[0].cssRules[0] as CSSStyleRule).style.borderTop = null);
}, 100);
}
Although functional, the drawback lies in requiring a setTimeout function set at a maximum of 100ms to momentarily display the applied css changes. Occasionally, the timer may not suffice suggesting there isn't a flawless solution available.