knowler

export class RestartAnimationsElement extends HTMLElement {
	#controller;

	get #buttonElement() { return this.shadowRoot.querySelector(':host > button'); }

	connectedCallback() {
		if (!this.shadowRoot) {
			this.attachShadow({mode: 'open'});
			this.shadowRoot.innerHTML = `<button type="button" part="button"><slot>Restart Animations</slot></button>`;
			this.#controller = new AbortController();

knowler

/*
 * Modern CSS crash course:
 *
 * - Leverage flexibility for everything. The web is magic paper that adapts to whatever viewport it’s in.
 *   - This means using `display` values like `flex` and `grid`.
 *   - Avoid using `@media` for setting sizes: use fluid type and spacing (i.e. `clamp()`, `min()`, `max()` math functions).
 * - Use logical properties for sizing and spacing. This helps with internationalization.
 *   - Think in axes: block (vertical: top is start, bottom is end), inline (horizontal: left is start, right is end).
 *     - Those are the left-to-right/top-to-bottom equivalances, but for other writing modes/directions you’ll be setting the correct direction (e.g. in RTL, inline-start is right and inline-end is left).
 *     - For flexbox and grid: “align” properties apply to the block axis and “justify” properties apply to the inline axis.

knowler

mixin shadow
	template(shadowrootmode="open")
		block
	script.
		{
			const element = document.currentScript.parentElement;
			if (!element.shadowRoot) {
				element.attachShadow({ mode: "open"})
				const template = element.querySelector(":scope > template[shadowrootmode=open]");
				if (template) element.shadowRoot.appendChild(template.content.cloneNode(true));