ユーザーがアクションを確定する前に、アクションのプレビューを提供すると便利です。インタレスト インボーカーは、インタレスト ソース（ボタンやリンクなど）とインタレスト ターゲットの間にインタレスト関係を宣言的に作成する方法を提供する、試験運用版のウェブ プラットフォーム機能です。宣言型の関係が確立されると、デベロッパーは CSS と JavaScript の両方を使用して、関心と関心の喪失に基づいてさまざまな方法で対応できます。このユースケースでは、interest イベントと loseinterest イベントを利用して、インタレスト ターゲティングのさまざまな効果をプレビューできます。
導入方法
インタレスト関係は、ボタンまたはリンク（インタレスト ソース）に interestfor 属性を設定することで作成されます。この属性は、別の要素（インタレスト ターゲット）への ID 参照を受け取ります。インタレストの呼び出し元またはソースに設定できるインタレスト ターゲットは 1 つだけですが、インタレスト ターゲットには複数のインタレストの呼び出し元を設定できます。
<!-- 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;
});
アクティブなインタレストのソースとターゲットは、それぞれ :interest-source 疑似セレクタと :interest-target 疑似セレクタを使用して CSS で選択できます。
/* Styles to apply when the effect is being previewed */
:interest-source {}
:interest-target {}
インタレスト インボーカー（interestfor 属性を持つ要素）の開始遅延と終了遅延は、interest-delay-start と interest-delay-end の CSS プロパティ、または interest-delay の短縮形プロパティで設定できます。
[interestfor] {
interest-delay-start: 0.2s;
interest-delay-end: 0.1s;
}
代替戦略
インタレスト インボーカーのフォールバックとブラウザ サポート
インタレスト インボーカーは、NPM の interestfor ポリフィル パッケージを使用して条件付きでポリフィルする必要があります。CDN を使用するよりも、ポリフィルをバンドルすることをおすすめします。
必須: HTMLButtonElement.prototype の interestForElement プロパティをチェックして機能を検出し、ネイティブ サポートがない場合にのみポリフィルを読み込みます。
<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 ポリフィルの注意事項
ポリフィルを使用する場合、ネイティブの疑似クラスとプロパティのサポートがないため、CSS API が若干変更されます。
- 疑似クラス: ポリフィルは実際の
:interest-source疑似クラスと:interest-target疑似クラスを定義できないため、代わりに.interest-sourceクラスと.interest-targetクラスを適用します。必須::is()と組み合わせて、ネイティブ状態とポリフィル状態の両方をサポートします。
/* 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の場合、ポリフィルはすべてのブラウザでカスタム プロパティを直接読み取ることができないため、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);
}