signal

An AbortSignal that aborts when the element is removed (not when it is moved).

signal: AbortSignal
fetch(`/api/users/${props.id}`, { signal })
  .then((response) => response.json())
  .then((user) => (profile.user = user));

window.addEventListener("resize", layout, { signal });

Behaviour

Topic Detail
When it aborts After onDisconnected hooks run, when the element is removed
What else uses it listen, handler attributes, fetch attributes and the element-bound timers
Use it for fetch, addEventListener on other targets, AbortSignal.any, and any API that accepts a signal

Example

Previewindex.htmlpointer-tracker.html

Pointer: , 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>signal demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="./pointer-tracker.html"></import-element>

  <pointer-tracker></pointer-tracker>
</body>
</html>
<custom-element name="pointer-tracker">
  <script>
    const pointer = useState({ x: 0, y: 0 });

    document.addEventListener("pointermove", (event) => {
      pointer.x = event.clientX;
      pointer.y = event.clientY;
    }, { signal });
  </script>

  <p>Pointer: <slot name="#pointer.x"></slot>, <slot name="#pointer.y"></slot></p>
</custom-element>

The document listener is removed when <pointer-tracker> is removed.

Edit this page on GitHub · View as Markdown