將 :focus CSS 應用於 shadowDOM 中的輸入字段並將 :focus CSS 應用於 shadow 主機

Question

我目前正在研究一個自定義元素，它基本上是輸入元素的略微增強版本，將其所有構建塊（包括輸入元素）托管在 shadow DOM 中。

當內部輸入元素具有焦點時，宿主元素應使用彩色輪廓和框陰影設置樣式，如下所示：

因此，輸入的 focus 和 blur 事件處理程序在宿主元素上切換屬性“focussed”，封裝的樣式如下所示：

:host([focussed]) {
    transition: outline 0.3s ease-in-out;
    outline-color: var(--focus-color, var(--default-focus-color)) !important;
    box-shadow: 0px 0px 3px var(--focus-color, var(--default-focus-color)) !important;
}

我不喜歡這種方法的地方：

在宿主上暴露一個需要觀察的自定義屬性，以保證視覺表現狀態的正確性（例如消費者調用setAttribute('focussed', '') ）

我考慮的替代方案：

當然，我的第一個想法是將屬性封裝在 shadow DOM 中（甚至切換一個類）在一個容器元素上，以填充宿主元素的空間，但問題是諸如outline 和 box-shadow 之類的溢出內容似乎被宿主元素強行隱藏 - 這似乎是合乎邏輯的。

我可以在宿主元素上指定一個固定的填充以確保輪廓和陰影的可見性，但這需要考慮 box-shadow 的不同瀏覽器渲染行為，並且對於消費者的自定義樣式會感覺違反直覺。

我正在這里尋找一種最佳實踐方法，我非常感謝您對這個方法的受過教育的想法。

Answer 1

this.attachShadow({
      mode: 'open',
      delegatesFocus: true
    })

適用於 Chrome、Edge、Opera，而不適用於其他（尚）

這將使用以下樣式設置輸入（在 shadowDOM 中）：

:focus {
  transition: outline 1s ease-in-out;
  outline: 2px solid var(--focus-color,blue);
  box-shadow: 10px 0px 10px var(--focus-shadow-color,red);
}

並使用（全局）CSS 設置宿主元素的樣式：

  :focus {
    outline: 5px solid green;
  }

完整的解釋和操場 JSFiddle
首先使用 Chrome/Edge/Opera，然后查看其他人缺乏的行為：
https://jsfiddle.net/CustomElementsExamples/9n6wtgj7/

它有一些點擊/聚焦/模糊解決方法的指針。

對於 FireFox ，Safari 支持，我會添加一些不太花哨的東西，可以輕松刪除。

目前我不清楚 Mozilla 和 Apple 的時間表是什么，
也許 Supersharp 知道