預覽興趣觸發動作

在使用者執行動作前，先提供預覽畫面，可帶來許多好處。Interest Invoker 是實驗性的網頁平台功能，可透過宣告式方式，在興趣來源 (例如按鈕或連結) 和指定興趣目標之間建立指定興趣關係。建立宣告式關係後，開發人員可以透過多種方法，使用 CSS 和 JavaScript 回應使用者感興趣和不感興趣的情況。在這個用途中，我們可以使用 interest 和 loseinterest 事件，預覽指定興趣的各種效果。

導入方式

如要建立關注關係，請在按鈕或連結 (即關注來源) 上設定 interestfor 屬性。這個屬性會採用另一個元素 (即感興趣的目標) 的 ID 參照。興趣叫用器或來源只能有一個興趣目標，但興趣目標可以有多個興趣叫用器。

<!-- MANDATORY: interest relationships must be established with the `interestfor` attribute on a button or a link -->
<button interestfor="interestingElement" data-effect="A">Some effect</button>
<button interestfor="interestingElement" data-effect="B">Some other effect</button>
<div id="interestingElement">Something interesting</div>

在這個用途中，我們可以使用 interest 和 loseinterest 事件，預覽指定興趣的各種效果。這兩個事件都是 InterestEvent，具有 source 屬性，也就是感興趣的來源 (即具有 interestfor 屬性的元素)。

interestingElement.addEventListener("interest", event => {
  // Apply the preview based on `event.source`
  event.target.dataset.preview = event.source.dataset.effect;
});

interestingElement.addEventListener("loseinterest", event => {
  // Unapply the preview
  delete event.target.dataset.preview;
});

您可以使用 CSS，分別透過 :interest-source 和 :interest-target 虛擬選取器，選取有效的興趣來源和目標。

/* Styles to apply when the effect is being previewed */
:interest-source {}
:interest-target {}

您可以使用 interest-delay-start 和 interest-delay-end CSS 屬性或簡寫 interest-delay 屬性，設定興趣叫用器 (即具有 interestfor 屬性的元素) 的開始和結束延遲時間。

[interestfor] {
  interest-delay-start: 0.2s;
  interest-delay-end: 0.1s;
}

備用策略

Interest invoker 的備用方案和瀏覽器支援

Interest Invoker 必須使用 NPM 的 interestfor Polyfill 套件，有條件地進行 Polyfill。建議您將 Polyfill 綁定，而非使用 CDN。

必要：檢查 HTMLButtonElement.prototype 上的 interestForElement 屬性，偵測功能，並僅在缺少原生支援時載入 polyfill。

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

CSS Polyfill 注意事項

使用 polyfill 時，CSS API 會稍微變更，以因應缺乏原生虛擬類別和屬性支援的情況：

虛擬類別：Polyfill 無法定義實際的 :interest-source 和 :interest-target 虛擬類別，因此會改用 .interest-source 和 .interest-target 類別。必要：請與 :is() 搭配使用，同時支援原生和 polyfill 狀態。

/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }

CSS 屬性：對於 interest-delay、interest-delay-start 和 interest-delay-end，polyfill 需要使用 CSS 變數，因為它無法在所有瀏覽器中直接讀取自訂屬性。

/* Adjust the start and end delay for interest invokers */
[interestfor] {
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}