Follow the tutorial for this code: https://gomakethings.com/how-to-dynamically-update-content-with-an-html-web-component/

ajax-html.js

customElements.define('ajax-html', class extends HTMLElement {

	/**
	 * The class constructor object
	 */
	constructor () {

		// Always call super first in constructor
		super();

		// Get attributes
		let eventNames = this.getAttribute('event-name')?.split(',') || [];
		this.eventUID = this.getAttribute('event-uid')?.split(',') || [];
		if (!eventNames.length || !this.id) return;

		// Listen for events
		for (let eventName of eventNames) {
			document.addEventListener(eventName, (event) => {
				this.updateHTML(event, this);
			});
		}

	}

	async updateHTML (event, instance) {

		// Only run if event has the correct type
		if (this.eventUID.length && !this.eventUID.includes(event.detail?.uid)) return;

		try {

			// Get the page
			let request = await fetch(location.href);
			if (!request.ok) throw request;
			let response = await request.text();

			// Convert to HTML
			let parser = new DOMParser();
			let html = parser.parseFromString(response, 'text/html');

			// Get the updated HTML element
			let newElem = html.querySelector(`#${instance.id}`);
			if (!newElem) return;

			// Replace it in the HTML
			instance.replaceWith(newElem);

		} catch (error) {
			console.warn('Unable to update HTML');
		}

	}

});

@JasonNeel Ok, so the idea is this...

1. The HTML for a component is rendered ONLY on the server.
2. Somewhere else on that same page, a form sends data to the server (with JS/ajax) and modifies the data that was used to generate the component from item 1.
3. Now, the item 1 component is out-of-sync with the data. So, you fetch a fresh copy of the HTML from the server, and update just the part that needs updating.

Oh! I think I see what you’re getting at now. By having the server render the data, you don’t need to have any logic client-side to process the data into the HTML you need to update the page. Sorry. Major brain fart on my part. I had the assumption that something existed client side to render the data without needing the server.

@JasonNeel Yea, you've got it! No client-side logic around that at all. You skip hydration entirely.