Explore usage of custom elements

[Venefilyn]

Custom elements is a living standard and all our targeted browsers support it. Would it make sense for us to utilize custom elements for part of our UI? Particularly, I can see this being useful for popup.

There are some limitations such as passing complex props to the element, some suggested using something like

const popup = new TbPopup('title', tabs, etc);
document.appendChild(popup);

// or
const popup = document.querySelector("tb-popup");
popup.tabs = ["stuff here"];
console.log(popup.tabs);

Example of a more advanced tabbed component

[creesch]

I'm not opposed tbh

[eritbh]

Polyfill will be required because of https://bugs.chromium.org/p/chromium/issues/detail?id=390807 (window.customElements is null in content scripts in Chrome, polyfilling it reportedly works fine, works as expected in FF).

(The polyfill that most people seem to be using for this is https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)

[Venefilyn]

Of course there's a bug 🙄

[eritbh]

I have a POC for this started on my PC that I never pushed, though I'm away from my apartment for the next couple days. Overall, I think it's very doable, and I think a lot of our existing builder functions can be adapted to use custom elements incrementally. The polyfill I linked above works well.

One caveat is that custom elements rely heavily on Shadow DOM, which is isolated from the styles applied on the main document. This is a great thing for us on one hand, because it means that our components will be isolated from subreddit styles on old Reddit and we can get rid of sub-specific style overrides. However, it also means that everything we'd want to put inside one of our custom elements needs to also be a custom element—if you want to convert windows to use a custom element, you first have to convert everything that ever appears inside a window to also be custom elements, otherwise they'll lose their styles.

Overall I think this would be a win, but it's going to take a lot of work. We should definitely work towards this incrementally, starting with the small stuff (like buttons and inputs) and working our way up from there.

[creesch]

The styling bit might actually be a bit of an issue for people using RES nightmode now that I think about it. I also know a few subs where they specifically styled toolbox and they might not be too happy about this. But those are minor issues mostly.

I am a bit concerned about needing to use yet another polyfill, though as long as we can use it without needing to build toolbox I am not opposed that much. As long as we can implement this in a way where we lay the basis in one commit that is releasable and where after we can then slowly convert elements.

[eritbh]

The styling bit might actually be a bit of an issue for people using RES nightmode now that I think about it. I also know a few subs where they specifically styled toolbox and they might not be too happy about this. But those are minor issues mostly.

I hadn't considered this. There are ways of making Shadow DOM nodes styleable from the outer document's styles, but it requires the use of specific CSS selectors that I'm not yet familiar with. This is probably worth getting a clearer idea of before we start implementing anything.