CSS - 帮助我理解“构造样式表”和#shadow-root

Question

我需要重写 Angular 小部件的一些 CSS。无论我做什么，我的 CSS 似乎都不适用。该小部件似乎已加载到标记为#shadow-root 的多个节点中。我读了一点，但我不知道这些应用的样式来自哪里。

如果可能的话，我不想触摸小部件本身，只从覆盖的样式表中覆盖这些样式。

Answer 1

这些是采用的样式表。

[...$0.shadowRoot.adoptedStyleSheets]

它们是由组件构造的，例如（使用lit）

  static get styles() {
    return css`:host { background: red; }`;
  }

lit 将从 css 的输出构造一个样式表，并采用它。

document.adoptedStyleSheets = [ stylesheet ];