Web dev, mostly frontend, buildless and with zero dependencies when possible. Web components, modern CSS, and vanilla JS. AuDHD. 🇵🇸 Free Palestine 🔗 stefanmatei.com 🔗 codepen.io/nonsalant 🔗 github.com/nonsalant
![class MyComponent extends HTMLElement {
static cssPaths = ['my-component.css'];
constructor() {
super().attachShadow({ mode: 'open' }).innerHTML = `<h1>Hello World</h1>`;
// Current shadow root or the first parent shadow root or 'document'
this.assetHost = this.shadowRoot ?? this.getRootNode();
}
connectedCallback() {
this.addAssets();
}
async addAssets() {
const Ctor = this.constructor; // to access static stuff from non-static method
const cssPaths = Ctor.cssPaths;
const stylesheets = await Ctor.addCss(...cssPaths);
this.assetHost.adoptedStyleSheets.push(...stylesheets);
}
static basePath = import.meta.resolve('./');
// Load CSS files and cache the stylesheets statically
static cssPromiseCache = new Map();
static async addCss(...stylesheetPaths) {
const stylesheets = [];
for (let path of stylesheetPaths) {...
}
return stylesheets;
}
}
export async function createStylesheet(cssText) {
const stylesheet = new CSSStyleSheet();
await stylesheet.replace(cssText);
return stylesheet;
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:komsc4cibngambanqjhpwweu/bafkreibjsypbpekxypfcxezwhzuqvopoq2e5rix4hylvlyrr6s5qhkp5ry)
![In the constructor():
this.#abortController = new AbortController();
this.#abortSignal = { signal: this.#abortController.signal }
In the connectedCallback():
trigger.addEventListener(
'click',
this.handleClick.bind(this),
this.#abortSignal
);
['mouseenter', 'focus'].forEach(e => {
trigger.addEventListener(
e,
() => this.loadAssets(),
this.#abortSignal
);
});
In the disconnectedCallback():
this.#abortController.abort();](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:komsc4cibngambanqjhpwweu/bafkreie54eyge6dfrbuwbrwazs5n6l46o3z4m5xfzf3xcnomi7puvsjbbi)
![async fetchData() {
if (!this.stationId) return;
const weatherStationUrl = `${this.dataPath}${this.stationId}.json`;
const data = await import(weatherStationUrl, { with: { type: "json" } });
const stationData = data.default;
const spring = stationData.springFreezeDates;
const fall = stationData.fallFreezeDates;
const freezeFreeDays = stationData.freezeFreeDays;
const stationMeta = stationData.meta;
this.lastFrostDate.innerHTML = `<strong>${formatDateLong(spring[32][50])}</strong>`;
this.firstFrostDate.innerHTML = `<strong>${formatDateLong(fall[32][50])}</strong>`;
this.freezeFreeDays.innerHTML = `<strong>${freezeFreeDays}</strong>`;](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:komsc4cibngambanqjhpwweu/bafkreig6qvzngydb7asg5smdg7563g5jqlqja2yodu7nkomwc7hz52g5la)
Web dev, mostly frontend, buildless and with zero dependencies when possible. Web components, modern CSS, and vanilla JS. AuDHD. 🇵🇸 Free Palestine 🔗 stefanmatei.com 🔗 codepen.io/nonsalant 🔗 github.com/nonsalant