1 files changed, 24 insertions, 0 deletions
diff --git a/element/container.js b/element/container.js
new file mode 100644
index 0000000..fe8dcac
--- /dev/null
+++ b/element/container.js
@@ -0,0 +1,24 @@
+import * as theme from '../theme.js'
+import { create as create_element } from './index.js'
+
+export class Container extends HTMLElement {
+	constructor(options) {
+		super();
+
+		this.body = this.attachShadow({ mode: 'closed' });
+		this.body.adoptedStyleSheets = (options?.css ?? []).concat(theme.css());
+
+		(options?.children ?? (() => []))().forEach(child => this.body.append(child))
+	}
+
+	static new(options) {
+		if (!this.__sfw_tag) {
+			this.__sfw_tag = this.__sfw_tag
+				?? 'sfw-' + this.name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+
+			customElements.define(this.__sfw_tag, this);
+		}
+
+		return create_element(this.__sfw_tag, options);
+	}
+}