Vistas previas de acciones activadas por intereses

Puede ser útil proporcionarles a los usuarios una vista previa de sus acciones antes de que las confirmen. Los invocadores de interés son una función experimental de la plataforma web que proporciona una forma declarativa de crear relaciones de segmentación por intereses entre una fuente de interés (es decir, un botón o un vínculo) y un objetivo de interés. Una vez que se establece la relación declarativa, hay una serie de métodos a los que un desarrollador puede responder en función del interés y la pérdida de interés con CSS y JavaScript. En este caso de uso, podemos aprovechar los eventos interest y loseinterest para obtener una vista previa de varios efectos para una segmentación por intereses.

Cómo implementarlo

Para crear una relación de interés, se establece el atributo interestfor en un botón o vínculo (es decir, la fuente de interés). El atributo toma una referencia de ID a otro elemento (es decir, el objetivo de interés). Los invocadores o las fuentes de interés solo pueden tener un destino de interés, pero un destino de interés puede tener varios invocadores de interés.

<!-- 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>

Para este caso de uso, podemos aprovechar los eventos interest y loseinterest para obtener una vista previa de varios efectos para una segmentación por intereses. Ambos eventos son InterestEvent que tienen una propiedad source que es la fuente del interés (es decir, el elemento con el atributo 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;
});

Las fuentes y los destinos de interés activos se pueden seleccionar con CSS usando los seudoselectores :interest-source y :interest-target, respectivamente.

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

El retraso de inicio y finalización de un activador de interés (es decir, el elemento con el atributo interestfor) se puede establecer con las propiedades de CSS interest-delay-start y interest-delay-end o la propiedad abreviada interest-delay.

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

Estrategias de resguardo

Resguardos y compatibilidad con navegadores para los invocadores de interés

Los activadores de interés deben tener un polyfill condicional con el paquete de polyfill interestfor de NPM. Se prefiere agrupar el polyfill en lugar de usar la CDN.

OBLIGATORIO: Detecta la función verificando la propiedad interestForElement en HTMLButtonElement.prototype y carga el polyfill solo cuando no haya compatibilidad nativa.

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

Advertencias sobre el polyfill de CSS

Cuando se usa el polyfill, la API de CSS cambia un poco para compensar la falta de compatibilidad con las pseudoclases y propiedades nativas:

• Pseudoclases: El polyfill no puede definir pseudoclases :interest-source y :interest-target reales, por lo que aplica las clases .interest-source y .interest-target en su lugar. OBLIGATORIO: Combínalas con :is() para admitir los estados nativos y con polyfill.

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

• Propiedades CSS: Para interest-delay, interest-delay-start y interest-delay-end, el polyfill requiere el uso de variables CSS, ya que no puede leer las propiedades personalizadas directamente en todos los navegadores.

/* 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);
}