Happy New Year and Happy First Post of the Year! Not sure that's a thing but this is my blog so I'm making it a thing. The last few days I've been playing with web components again, this time based on a simple idea: Could I create a web component that relies on external data, and use slots to provide content for the various stages of loading? What I mean by that is something like this: <get-remote-stuff>

	<div slot="loading">
	Please stand by, I'm loading your stuff.
	</div>
	
	<div slot="ready">
	I got the remote stuff, here it is!
	</div>
	
	<div slot="error">
	Sorry, something bad happened.
	</div>

</get-remote-stuff> The idea here is the component would handle automatically showing and hiding each slot based on the state of the remote, async process. I was able to get an example of this working, but I want to be clear that there are parts to this I'm not 100% convinced I understand correctly. As always, I'm looking for your feedback, so drop me a line if you have any questions or clarifications. Attempt One For my first attempt, I used a fake async process that simply used . First, I wrote some simple HTML: setTimeout <slot-one>
	<span slot="loading">Loading slot</span>
	<span slot="ready">Ready slot</span>
	<span slot="error">Error slot</span>
</slot-one> And then I created my web component: slot-one class SlotOne extends HTMLElement {

	constructor() {

		super();

		const shadow = this.attachShadow({mode:'open'});

		const div = document.createElement('div');
		div.innerHTML = `
<slot name="loading"></slot>
<slot name="ready"></slot>
<slot name="error"></slot>
`;

		const style = document.createElement('style');
		style.innerHTML = `
		slot {
			display:none;
		}
		`;

		shadow.appendChild(div);
		shadow.appendChild(style);
	}

	async connectedCallback() {
		console.log('connected callback');
		let loader = this.shadowRoot.querySelector('slot[name=loading]');
		loader.style.display='inline';
		let ready = this.shadowRoot.querySelector('slot[name=ready]');
		setTimeout(() => {
			console.log('delayed thing done');
			loader.style.display='none';
			ready.style.display='inline';
		}, 3000);
	}

}

customElements.define('slot-one', SlotOne); From the top, I start off by creating two . One renders the slots and the other uses CSS to hide them. Notice I'm pointing to the element, not the that will be rendered when the component is loaded. DOM elements slot div In , I use on the to unhide the loading slot and get a pointer to the slot. connectedCallback querySelector shadowRoot ready I do my async process, which in this case is just , and when it's complete, I hide the loader and show the ready state. This seemed to work just fine, and you can see it in action below: setTimeout https://codepen.io/cfjedimaster/pen/XWBKraG?embedable=true Attempt Two For my second attempt, I wanted to do two things. First, switch to a 'real' async process. I got a free key for . Given a location value and a key, I could get the weather report here: . This returns a bunch of information, but for simplicity's sake, I decided to just return the current temperature. Here's the function: Weather API https://api.weatherapi.com/v1/current.json?key=${key}&q=${q}&aqi=no async getTemperature(q,key) {
	let resp = await fetch(`https://api.weatherapi.com/v1/current.json?key=${key}&q=${q}&aqi=no`);
	let data = await resp.json();
	return data.current.temp_f;
} Yes, I didn't add error checking here, and I should, but as I'm on vacation, I'm being a bit lazy. (Ok, those of you who know me know I don't need an excuse to be lazy. ;) Ok, with this in place, my goal this time was pretty simple - after getting the result, make it available to the slot. To handle this, I used a simple variable token. Here's how it looks: <current-temp location="70508">

	<span slot="loading">
	Getting temperature...
	</span>
	
	<span slot="ready">
	The temperature is {temp}F.
	</span>
	
	<span slot="error">
	Error slot
	</span>

</current-temp> I use brackets to represent the variable and the component should handle the replacement. I thought this would be trivial, but here's where I ran into a brick wall. Here's the JavaScript I used to work with the slot before: let ready = this.shadowRoot.querySelector('slot[name=ready]');
// stuff...
ready.style.display='inline'; But when I tried to write the of the slot, nothing worked. I tried , , even . Nothing worked. I then tried something else: contents innerHTML innerText textContents let readyDOM = this.querySelector('*[slot=ready]'); This is matching any HTML element with the attribute set to , i.e. the DOM item from the HTML inside the web component. Also, note I'm not using . So... I can hide and show the elements, but the actual text/HTML is in the "real" item with the named slot. I that makes sense. Here's the complete callback handler: slot ready shadowRoot slot think connected async connectedCallback() {
	console.log('connected callback');
	let loader = this.shadowRoot.querySelector('slot[name=loading]');
	loader.style.display='inline';
	let ready = this.shadowRoot.querySelector('slot[name=ready]');
	let temp = await this.getTemperature(this.location, this.KEY);

	loader.style.display='none';
	ready.style.display='inline';

	let readyDOM = this.querySelector('*[slot=ready]');
	let content = readyDOM.innerText;
	content = content.replace('{temp}', temp);
	readyDOM.innerText = content;
} This works, and I said, I think it makes sense, but I'd love it if someone were to share some details as I'm a bit fuzzy here. You can see the complete demo below, and yes, it is missing the error handler, but that wouldn't be hard to add. https://codepen.io/cfjedimaster/pen/ZEjOELE?embedable=true For folks curious, right now in my zip code, it is 73.9 degrees. Because… Louisiana. Also published here.

Short Number Formatting With Intl

Downloading Data as a File with Alpine.js

How to Dynamically Hide and Show Slot Content in a Web Component

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Cat-Centric Guide to Using Web Components in Alpine.js

The Noonification: How to Deal With Flapping or Broken Tests (11/29/2023)

The Noonification: Delving Into OpenTelemetry Collector (11/18/2023)

The Noonification: How to Implement a Merkle Tree in Solidity (11/12/2023)

105 Stories To Learn About K8s

A Cat-Centric Guide to Using Web Components in Alpine.js

The Noonification: How to Deal With Flapping or Broken Tests (11/29/2023)

The Noonification: Delving Into OpenTelemetry Collector (11/18/2023)

The Noonification: How to Implement a Merkle Tree in Solidity (11/12/2023)

105 Stories To Learn About K8s

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps