Polyfill the window.customElements (go-gitea#23592)

Related: go-gitea#23590 Reference: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs It seems that there are some users using old browsers, so the `window.customElements` need polyfill. The Custom Elements would help a lot for Gitea's UI problems, including: * `<span class="js-pretty-number">` * `<time data-format>` So it's worth get polyfill. --------- Co-authored-by: delvh <[email protected]>
monester · Mar 20, 2023 · 529bac1 · 529bac1
1 parent ccd3a55
commit 529bac1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@primer/octicons": "18.2.0",
     "@vue/compiler-sfc": "3.2.47",
+    "@webcomponents/custom-elements": "1.5.1",
     "add-asset-webpack-plugin": "2.0.1",
     "ansi-to-html": "0.7.2",
     "asciinema-player": "3.2.0",

diff --git a/web_src/js/webcomponents/GiteaOriginUrl.js b/web_src/js/webcomponents/GiteaOriginUrl.js
@@ -1,3 +1,5 @@
+import '@webcomponents/custom-elements'; // automatically adds custom elements for older browsers that don't support it
+
 // this is a Gitea's private HTML component, it converts an absolute or relative URL to an absolute URL with the current origin
 window.customElements.define('gitea-origin-url', class extends HTMLElement {
   connectedCallback() {