Add link-once and script-once web components

core/static/webpack/core/components/include-index.ts

@@ -0,0 +1,33 @@
+import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
+
+/**
+ * Web component used to import css files only once
+ * If called multiple times or the file was already imported, it does nothing
+ **/
+@registerComponent("link-once")
+export class LinkOnce extends inheritHtmlElement("link") {
+  connectedCallback() {
+    super.connectedCallback(false);
+    // We get href from node.attributes instead of node.href to avoid getting the domain part
+    const href = this.node.attributes.getNamedItem("href").nodeValue;
+    if (document.querySelectorAll(`link[href='${href}']`).length === 0) {
+      this.appendChild(this.node);
+    }
+  }
+}
+
+/**
+ * Web component used to import javascript files only once
+ * If called multiple times or the file was already imported, it does nothing
+ **/
+@registerComponent("script-once")
+export class ScriptOnce extends inheritHtmlElement("script") {
+  connectedCallback() {
+    super.connectedCallback(false);
+    // We get src from node.attributes instead of node.src to avoid getting the domain part
+    const src = this.node.attributes.getNamedItem("src").nodeValue;
+    if (document.querySelectorAll(`script[src='${src}']`).length === 0) {
+      this.appendChild(this.node);
+    }
+  }
+}