如何使用shadow-dom Web組件實現一致的焦點輪廓顏色？

Question

我正在使用Web組件，大多數是用lit-element和lit-html編寫的，他們使用的是Shadow DOM。

某些組件具有按鈕和其他具有默認焦點輪廓的交互式部件。

當我構建一個應用程序時，我想設置一個頁面范圍的規則，將焦點輪廓更改為從頁面的背景顏色中清晰突出的顏色。

*:focus {
  outline: 2px solid lime;
}

我希望這會在陰影邊界上流入Web組件，類似於color和font-size ，但事實並非如此

考慮到outline沒有越過陰影邊界 - 我有什么選擇來實現我一致的焦點輪廓顏色？

Answer 1

在您的應用中標准化CSS變量--focus-outline

應用級：

* {
  --focus-outline: 2px solid lime;
}

*:focus {
  outline: var(--focus-outline);
}

示例組件用法：

*:focus {
  outline: var(--focus-outline, 2px solid #0af);
}

必須重構每個組件才能接受此變量

每個組件都必須定義自己的后備，如2px solid #0af （遺憾的是還沒有任何標准化的default-focus-outline css值）