Create CSS module-like structure

Doesn't currently work; @import rules are not yet valid in constructed stylesheets.

index.html

@@ -7,37 +7,16 @@
 		<!-- Interaction scripts -->
 		<script type="module" src="src/index.mjs"></script>
 		<!-- Global style -->
-		<style>
+		<link rel="stylesheet" type="text/css" href="style/base.css">
-			@import "style/base.css";
+		<link rel="stylesheet" type="text/css" href="style/light.css">
-			@import "style/light.css";
+		<link rel="stylesheet" type="text/css" href="style/dark.css">
-			@import "style/dark.css";
-		</style>
 		<!-- Templates -->
 		<template id="template-vault">
-			<style>
-				.vault {
-					margin-left: 64px;
-					margin-right: 64px;
-				}
-			</style>
 			<div class="vault">
 				<slot name="vault-child"></slot>
 			</div>
 		</template>
 		<template id="template-canvas">
-			<style>
-				.canvas {
-					position: relative;
-
-					display: flex;
-
-					width: max-content;
-					height: max-content;
-
-					margin-top: 64px;
-					margin-bottom: 64px;
-				}
-			</style>
 			<div class="canvas">
 				<slot name="canvas-nodes">{Canvas nodes}</slot>
 				<slot name="canvas-edges">{Canvas edges}</slot>
@@ -47,32 +26,6 @@
 			<slot name="display-container">{Displayed content}</slot>
 		</template>
 		<template id="template-node-group">
-			<style>
-				.node {
-					outline: var(--node-group-border-width) solid var(--color-node);
-					background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
-					border-radius: 0 8px 8px 8px;
-					padding: 12px;
-				}
-
-				.node-group-label {
-					position: relative;
-					bottom: 14px;
-					left: -12px;
-					transform: translateY(-100%);
-
-					display: inline-block;
-
-					outline: var(--node-group-border-width) solid var(--color-node);
-					background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
-					border-radius: 8px 8px 0 0;
-					padding: 12px;
-				}
-
-				.node-group-label-title {
-					margin: 0;
-				}
-			</style>
 			<div class="canvas-item node node-group">
 				<aside class="node-group-label">
 					<h1 class="node-group-label-title"><slot name="node-group-label">{Group label}</slot></h1>
@@ -80,25 +33,6 @@
 			</div>
 		</template>
 		<template id="template-node-file">
-			<style>
-				.node {
-					outline: var(--node-file-border-width) solid var(--color-node);
-					background-color: color-mix(in srgb, var(--color-node) 10%, var(--color-background));
-					border-radius: 8px;
-					padding: 12px;
-				}
-
-				.node-file {
-					overflow-x: clip;
-					overflow-y: scroll;
-				}
-
-				.node-file-label {
-					font-size: 2em;
-					margin-block-start: .67em;
-					margin-block-end: .67em;
-				}
-			</style>
 			<article class="canvas-item node node-file">
 				<h1 class="node-file-label">
 					<slot name="node-file-label">{Node title}</slot>
@@ -107,70 +41,29 @@
 			</article>
 		</template>
 		<template id="template-node-text">
-			<style>
-				.node {
-					outline: var(--node-file-border-width) solid var(--color-node);
-					background-color: color-mix(in srgb, var(--color-node) 10%, var(--color-background));
-					border-radius: 8px;
-					padding: 12px;
-				}
-
-				.node-text {
-					overflow-x: clip;
-					overflow-y: scroll;
-				}
-			</style>
 			<article class="canvas-item node node-text">
 				<slot name="node-text-contents">{Node contents}</slot>
 			</article>
 		</template>
 		<template id="template-edge">
-			<style>
-				.edge {
-
-				}
-			</style>
 			<div class="canvas-item edge">
 				<slot name="edge-svg">{Edge SVG}</slot>
 			</div>
 		</template>
 		<template id="template-markdown">
-			<style>
-				.markdown {
-
-				}
-			</style>
 			<div class="markdown">
 				<slot name="markdown-document">{Markdown text}</slot>
 			</div>
 		</template>
 		<template id="template-frontmatter">
-			<style>
-				.frontmatter {
-					opacity: 50%;
-				}
-			</style>
 			<div class="frontmatter">
 				<slot name="frontmatter-contents">{Markdown text}</slot>
 			</div>
 		</template>
 		<template id="template-hashtag">
-			<style>
-				.hashtag {
-					background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
-					color: var(--color-accent);
-				}
-			</style>
 			<span class="hashtag"><slot name="hashtag-tag">{#Hashtag}</slot></span>
 		</template>
 		<template id="template-wikilink">
-			<style>
-				.wikilink {
-					color: var(--color-accent);
-					text-decoration: underline 1px solid currentColor;
-					cursor: pointer;
-				}
-			</style>
 			<a class="wikilink"></a>
 		</template>
 	</head>

src/elements/base.mjs

@@ -22,6 +22,27 @@ export class CustomElement extends HTMLElement {
         throw new NotImplementedError("template has not been overridden.")
     }
 
+    /**
+     * Create a stylesheet which imports the stylesheet located at this module's path with `.mjs` replaced by `.css`.
+     * @param importMetaURL The value of `import.meta.url` for the calling module.
+     * @returns {CSSStyleSheet} The created stylesheet.
+     */
+    static makeModuleLikeStyleSheet(importMetaURL) {
+        const importURL = importMetaURL.replace(/[.]mjs$/, ".css")
+        const stylesheet = new CSSStyleSheet()
+        stylesheet.replaceSync(`@import "${importURL}";`)
+        return stylesheet
+    }
+
+    /**
+     * A way to use inheritance with custom stylesheets.
+     * @abstract Implementors should add their own stylesheets via this function.
+     * @returns {CSSStyleSheet[]} An array of stylesheets that should be added to the {@link shadowRoot}.
+     */
+    static createStyleSheets() {
+        return []
+    }
+
     /**
      * The local cloned instance of the template node.
      * @type {Node}
@@ -41,8 +62,10 @@ export class CustomElement extends HTMLElement {
      * Callback automatically called when this element is added to the DOM.
      */
     connectedCallback() {
-        // The shadow root, the inner contents of the element..
+        // The shadow root, the inner contents of the element.
         const shadow = this.attachShadow({ mode: "open" })
+        // Attach stylesheets to the shadow root.
+        shadow.adoptedStyleSheets.push(...this.constructor.createStyleSheets())
         // The element contained inside the shadow root..
         this.#instance = this.constructor.template.content.cloneNode(true)
         // Call the custom callback.

src/elements/canvas/canvas.css

@@ -0,0 +1,11 @@
+.canvas {
+    position: relative;
+
+    display: flex;
+
+    width: max-content;
+    height: max-content;
+
+    margin-top: 64px;
+    margin-bottom: 64px;
+}

src/elements/canvas/canvas.mjs

@@ -10,6 +10,10 @@ export class CanvasElement extends CustomElement {
         return document.getElementById("template-canvas")
     }
 
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * The contents of the Canvas, as they were the last time they were updated.
      * @type {string}

src/elements/canvas/canvasitem.css

@@ -0,0 +1,3 @@
+.canvas-item {
+
+}

src/elements/canvas/canvasitem.mjs

@@ -7,6 +7,10 @@ import {MalformedError} from "../../utils/errors.mjs";
  * @abstract
  */
 export class CanvasItemElement extends CustomElement {
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * @returns {number} The X coordinate of the top left vertex of this element.
      */

src/elements/canvas/edge/base.css

@@ -0,0 +1,3 @@
+.edge {
+
+}

src/elements/canvas/edge/base.mjs

@@ -11,6 +11,10 @@ export class EdgeElement extends CanvasItemElement {
         return document.getElementById("template-edge")
     }
 
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * The canvas this element is contained in.
      * Can be recalculated with {@link recalculateCanvas}.

src/elements/canvas/node/base.css

@@ -0,0 +1,6 @@
+.node {
+    outline: var(--node-group-border-width) solid var(--color-node);
+    background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
+    border-radius: 0 8px 8px 8px;
+    padding: 12px;
+}

src/elements/canvas/node/base.mjs

@@ -6,6 +6,10 @@ import { CanvasItemElement } from "../canvasitem.mjs";
  * @abstract
  */
 export class NodeElement extends CanvasItemElement {
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * Coordinates of the point where edges connected to the top of this node should attach to.
      * @type {[number, number]}

src/elements/canvas/node/file.css

@@ -0,0 +1,10 @@
+.node-file {
+    overflow-x: clip;
+    overflow-y: scroll;
+}
+
+.node-file-label {
+    font-size: 2em;
+    margin-block-start: .67em;
+    margin-block-end: .67em;
+}

src/elements/canvas/node/file.mjs

@@ -8,6 +8,10 @@ export class NodeFileElement extends NodeElement {
         return document.getElementById("template-node-file")
     }
 
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * Get the path of the file displayed by this node, relative to the root of the vault, from the `path` attribute.
      * @returns {string} The path.

src/elements/canvas/node/group.css

@@ -0,0 +1,17 @@
+.node-group-label {
+    position: relative;
+    bottom: 14px;
+    left: -12px;
+    transform: translateY(-100%);
+
+    display: inline-block;
+
+    outline: var(--node-group-border-width) solid var(--color-node);
+    background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
+    border-radius: 8px 8px 0 0;
+    padding: 12px;
+}
+
+.node-group-label-title {
+    margin: 0;
+}

src/elements/canvas/node/group.mjs

@@ -10,6 +10,10 @@ export class NodeGroupElement extends NodeElement {
         return document.getElementById("template-node-group")
     }
 
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * The label text of the group.
      * Obtained from the `label` attribute of the element.

src/elements/canvas/node/text.css

@@ -0,0 +1,4 @@
+.node-text {
+    overflow-x: clip;
+    overflow-y: scroll;
+}

src/elements/canvas/node/text.mjs

@@ -9,6 +9,10 @@ export class NodeTextElement extends NodeElement {
         return document.getElementById("template-node-text")
     }
 
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * Get the Markdown source of this node from the `document` attribute.
      */

src/elements/markdown/frontmatter.css

@@ -0,0 +1,3 @@
+.frontmatter {
+    opacity: 50%;
+}

src/elements/markdown/frontmatter.mjs

@@ -9,6 +9,10 @@ export class FrontMatterElement extends CustomElement {
         return document.getElementById("template-frontmatter")
     }
 
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * The programming language used to define this front matter, obtained from the `lang` attribute.
      * @type {string}

src/elements/markdown/hashtag.css

@@ -0,0 +1,4 @@
+.hashtag {
+    background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
+    color: var(--color-accent);
+}

src/elements/markdown/hashtag.mjs

@@ -9,6 +9,10 @@ export class HashtagElement extends CustomElement {
         return document.getElementById("template-hashtag")
     }
 
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * The name of the hashtag, with no leading hash, obtained from the `tag` attribute.
      * @returns {string}

src/elements/markdown/renderer.css

@@ -0,0 +1,3 @@
+.markdown {
+
+}

src/elements/markdown/renderer.mjs

@@ -10,6 +10,10 @@ export class MarkdownElement extends CustomElement {
         return document.getElementById("template-markdown")
     }
 
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * {@link Marked} Markdown renderer.
      * @type {Marked}

src/elements/markdown/wikilink.css

@@ -0,0 +1,5 @@
+.wikilink {
+    color: var(--color-accent);
+    text-decoration: underline 1px solid currentColor;
+    cursor: pointer;
+}

src/elements/markdown/wikilink.mjs

@@ -14,6 +14,10 @@ export class WikilinkElement extends CustomElement {
         return document.getElementById("template-wikilink")
     }
 
+    static createStyleSheets() {
+        return [...super.createStyleSheets(), this.makeModuleLikeStyleSheet(import.meta.url)]
+    }
+
     /**
      * Element displaying the this one.
      * Can be recalculated with {@link recalculateAncestors}.

src/elements/vault.css

@@ -0,0 +1,4 @@
+.vault {
+    margin-left: 64px;
+    margin-right: 64px;
+}