Polyfill the window.customElements

[wxiaoguang]

Related: #23590

Reference: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

It seems that some browsers don't support customElements.

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.

[silverwind]

I don't think it's worth it. Any browser released in the last 5 years should have it. If such an ancient browser is used, I assume more stuff will be broken.

Also, the place where you polyfill is incorrect, it should be a separate file so that if more components are added, you avoid the double import.

[wxiaoguang]

But we ever spent more time on older browsers, like this one:

• ReferenceError: EventSource is not defined in Pale Moon #20572
• Fix the JS error "EventSource is not defined" caused by PaleMoon #20584

Hmm ... same reporter in comment ....

---

About "Also, the place where you polyfill is incorrect, it should be a separate file so that if more components are added, you avoid the double import."

I know. But, it's not worth to make it that complex (there is only one file at the moment). Next time, when adding more components, there will be definitely a separate index file for all components (I promise)

[silverwind]

PaleMoon only got it very recently, so yeah probably needed.

Can you just move the polyfill to webcomponents/polyfill.js and import that file in the component script?

[wxiaoguang]

Can you just move the polyfill to webcomponents/polyfill.js and import that file in the actualy component script?

I am not sure whether I could do that as your expectation, could you help to make that change? You have the writer access to my fork.

[silverwind]

Actually a index.js solution would be best, yeah.

[silverwind]

I'm not sure if that polyfill is going to work because it seems it does not support extending. There is another one around that does.

[wxiaoguang]

I have checked, and we do not need extend builtin elements (maybe we never want to do so).

Since webcomponentsjs seems to be the "official" one, so I choose it.

[silverwind]

I think we need the other polyfill because we do class extends HTMLElement which is extending a built-in. You could just try in PaleMoon 32.0.1 to confirm whether the polyfill actually works.

[wxiaoguang]

I think we need the other polyfill because we do class extends HTMLElement which is extending a built-in. You could just try in PaleMoon 32.0.1 to confirm whether the polyfill actually works.

Checked, it really works.

The fact is: our component never depends on the builtin element's behavior, so we are not extending them. class extends HTMLElement means nothing with the builtin element.

See my screenshot: the right one is with the polyfill (I also added a temp component on the page to show it works).

[silverwind]

I guess it's okay as short-term fix. When we add another web component, we need to move the polyfill.

[GiteaBot]

I was unable to create a backport for 1.19, please send one manually. 🍵