编辑伪类“:host”的属性

Question

在 Angular 应用程序中，我想编辑应用于组件“p-table-row”的伪类“:host”的属性“border-top”，该组件是来自 porsche 库的组件，所以我无法直接编辑它。

一张图胜过一千个字，所以这里是：

我尝试了以下 CSS 选择器，但没有任何效果。

p-table-row {
  border-top: 1px solid red !important; // cf. 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;
}

我也愿意使用查询选择器来编辑此属性，但同样我不知道如何选择类：host。

抱歉，我无法提供 stackblitz，因为我无法让它与我正在使用的库一起工作。

Answer 1

经验丰富的开发人员仅在需要时才使用

!important

。
提醒我不要买保时捷。

您可能只能将CSS注入现有的shadowRoot中以推翻shadowRoot中早期的STYLE定义

.querySelector("p-table-row")
  .shadowRoot
    .append(
     Object.assign("STYLE",{
      innerHTML: `:host{1px solid red!important}`
     })
    );