Infinite scroll feed

<div class="pane">
  <feed-elemental aria-label="Ethics, Part I" auto-load="2"></feed-elemental>
  <button type="button" class="more">Load more</button>
</div>

<section class="detail" hidden>
  <h3 tabindex="-1"></h3>
  <p></p>
  <button type="button" class="back">Back to the argument</button>
</section>

/* The feed scrolls in its own box rather than with the page - the case worth showing,
   because the offset that matters is then a pane's and the articles in it arrive late. */
.pane {
  box-sizing: border-box;
  max-inline-size: 32rem;
  block-size: 18rem;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, currentcolor 20%, transparent);
  border-radius: 0.375rem;
}
.detail { max-inline-size: 32rem; }
feed-elemental h3, .detail h3 { margin: 0 0 0.25rem; font-size: 1rem; }
feed-elemental p, .detail p { margin: 0; }
/* The busy state is the element's to set and the page's to draw. The button is a sibling
   of the feed, so `+` is the whole of reaching it - and dimmed rather than `disabled`,
   because disabling a focused button drops focus to the body, and Ctrl+End just put it
   here. */
feed-elemental[aria-busy="true"] { opacity: 0.6; }
feed-elemental[aria-busy="true"] + .more { opacity: 0.6; cursor: progress; }
.more, .back {
  margin-block-start: 1rem;
  padding: 0.35rem 0.75rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: color-mix(in srgb, currentcolor 6%, Canvas);
  border: 1px solid color-mix(in srgb, currentcolor 35%, transparent);
  border-radius: 0.375rem;
}

// The page owns the data, the fetching and the cursor. This one owns none of them for real:
// a mock answering out of an array a few hundred milliseconds late, so the busy state has
// something to be busy about and the way back has something to wait for.
//
// The set is the whole of Spinoza's argument for God's existence - eight definitions, seven
// axioms and the eleven propositions that get there - which makes it the honest shape for a
// feed: an order that matters, and an end worth reaching.
const ETHICS = [
  ['Definition I', 'By that which is self-caused, I mean that of which the essence involves existence, or that of which the nature is only conceivable as existent.'],
  ['Definition II', 'A thing is called finite after its kind, when it can be limited by another thing of the same nature; for instance, a body is called finite because we always conceive another greater body.'],
  ['Definition III', 'By substance, I mean that which is in itself, and is conceived through itself: in other words, that of which a conception can be formed independently of any other conception.'],
  ['Definition IV', 'By attribute, I mean that which the intellect perceives as constituting the essence of substance.'],
  ['Definition V', 'By mode, I mean the modifications of substance, or that which exists in, and is conceived through, something other than itself.'],
  ['Definition VI', 'By God, I mean a being absolutely infinite - that is, a substance consisting in infinite attributes, of which each expresses eternal and infinite essentiality.'],
  ['Definition VII', 'That thing is called free, which exists solely by the necessity of its own nature, and of which the action is determined by itself alone.'],
  ['Definition VIII', 'By eternity, I mean existence itself, in so far as it is conceived necessarily to follow solely from the definition of that which is eternal.'],
  ['Axiom I', 'Everything which exists, exists either in itself or in something else.'],
  ['Axiom II', 'That which cannot be conceived through anything else must be conceived through itself.'],
  ['Axiom III', 'From a given definite cause an effect necessarily follows; and, on the other hand, if no definite cause be granted, it is impossible that an effect can follow.'],
  ['Axiom IV', 'The knowledge of an effect depends on and involves the knowledge of a cause.'],
  ['Axiom V', 'Things which have nothing in common cannot be understood, the one by means of the other; the conception of one does not involve the conception of the other.'],
  ['Axiom VI', 'A true idea must correspond with its ideate or object.'],
  ['Axiom VII', 'If a thing can be conceived as non-existing, its essence does not involve existence.'],
  ['Proposition I', 'Substance is by nature prior to its modifications.'],
  ['Proposition II', 'Two substances, whose attributes are different, have nothing in common.'],
  ['Proposition III', 'Things which have nothing in common cannot be one the cause of the other.'],
  ['Proposition IV', 'Two or more distinct things are distinguished one from the other, either by the difference of the attributes of the substances, or by the difference of their modifications.'],
  ['Proposition V', 'There cannot exist in the universe two or more substances having the same nature or attribute.'],
  ['Proposition VI', 'One substance cannot be produced by another substance.'],
  ['Proposition VII', 'Existence belongs to the nature of substances.'],
  ['Proposition VIII', 'Every substance is necessarily infinite.'],
  ['Proposition IX', 'The more reality or being a thing has, the greater the number of its attributes.'],
  ['Proposition X', 'Each particular attribute of the one substance must be conceived through itself.'],
  ['Proposition XI', 'God, or substance, consisting of infinite attributes, of which each expresses eternal and infinite essentiality, necessarily exists.']
];
const POSTS = ETHICS.map(([title, body], at) => ({ id: 'ethics-' + (at + 1), title, body }));
const PAGE = 4;

/** The mocked endpoint: `count` posts from `from`, late. */
function api(from, count) {
  return new Promise((send) => setTimeout(() => send(POSTS.slice(from, from + count)), 300));
}

const pane = document.querySelector('.pane');
const feed = pane.querySelector('feed-elemental');
const more = pane.querySelector('.more');
const detail = document.querySelector('.detail');

// `textContent`, not a template string: escaping the text at the one place it is
// interpolated is a rule easier to keep than to remember.
function render(post) {
  const article = document.createElement('article');
  const heading = document.createElement('h3');
  const link = document.createElement('a');
  const body = document.createElement('p');
  link.href = '#' + post.id;
  link.textContent = post.title;
  body.textContent = post.body;
  heading.append(link);
  article.append(heading, body);
  return article;
}

// The end of the set is the page's to declare: `total` is what stops every article saying
// "of -1", and the button is what stops being a lie.
function ended() {
  const loaded = feed.querySelectorAll('article').length;
  if (loaded >= POSTS.length) feed.setAttribute('total', String(POSTS.length));
  more.hidden = loaded >= POSTS.length;
}

feed.addEventListener('feed-load', (event) => {
  event.detail.wait(api(event.detail.count, PAGE).then((posts) => {
    feed.append(...posts.map(render));
    ended();
  }));
});

more.addEventListener('click', () => feed.load());
feed.load();

// What the page remembers while the reader is somewhere else. A real one keeps this in
// `history.state`, so it belongs to the history entry it describes; this one is a variable,
// because the demo never leaves the document.
let saved = null;

pane.addEventListener('click', (event) => {
  const link = event.target.closest('article a[href]');
  if (!link) return;
  event.preventDefault();

  // Read before anything is hidden. A box that is `display: none` has no scroll offset to
  // read and none to set, which is the whole trap of restoring one.
  saved = { count: feed.querySelectorAll('article').length, scroll: pane.scrollTop, id: link.hash.slice(1) };

  const post = POSTS.find((entry) => entry.id === saved.id);
  detail.querySelector('h3').textContent = post.title;
  detail.querySelector('p').textContent = post.body;
  // The feed is torn down on the way out, because that is what leaving does to it - a router
  // unmounting the view, or a browser building the next document. Leaving it in the DOM would
  // make the section below a demo of nothing.
  feed.replaceChildren();
  pane.hidden = true;
  detail.hidden = false;
  detail.querySelector('h3').focus();
});

detail.querySelector('.back').addEventListener('click', () => {
  detail.hidden = true;
  pane.hidden = false;

  // One request for everything that was loaded, not one per page. However many pages the
  // reader walked down, the way back is not that many round trips.
  api(0, saved.count).then((posts) => {
    feed.replaceChildren(...posts.map(render));
    ended();
    // `preventScroll`, then the offset. `focus()` scrolls what it lands on into view, and a
    // scroll of the browser's choosing is not the one that was saved.
    const link = pane.querySelector('a[href="#' + saved.id + '"]');
    if (link) link.focus({ preventScroll: true });
    pane.scrollTop = saved.scroll;
  });
});