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 I don't understand what you mean. I need to get a fresh copy of the URL from the server to get the current version of the HTML associated with that component. It's not rendered in a separate file somewhere or anything.

@cferdinandi Yeah, I must be missing something here then. Sorry. In my head, there’s no reason to fetch the current page you’re on, unless the reason is to get the page in an unmodified state, which doesn’t make sense to me because I don’t think that would matter here.

@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.