Probably you are already aware that the first couple of Alpha versions of Joomla 4 have been released, and if you were curious enough you may have already installed it locally. If you did so then you may have noticed that the first page when you logged into administrator contained a couple of alerts. Well, those alerts, although they look like Bootstrap, are in fact custom elements! Find out more about what this means for you and your website.

Right and what are those custom elements?

Custom elements is a part of the native platform (W3C) that consist the technology called Web Components. In essence custom elements is a way to declare new elements to the browser! Lets explain this a bit further: Browsers come with some predefined elements (or tags) eg div, span, input, etc and some more advanced as video. The video is a very interesting tag because all you define is a source for the video file and your browser automatically creates a video player with many buttons (play, position slider, etc). Custom element is the technology that allows any developer to create such rich elements!

Why not web components?

Web components actually consist of 3 different parts: Custom Elements, Templates and Shadow Dom. Unfortunately, due to the way forms are created in Joomla, Shadow Dom would break them badly. Also there is another concern about CSPs (Content Security Policy) which is equally important - for more information about this, read the Mozilla Developer Documentation at https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP! Therefore Joomla 4 will only support (in core) Templates and Custom Elements (but developers can utilise the Shadow Dom as well, we provide a flag to load the right polyfill in this case).

Polyfill? I thought this was native browser tech...

Well, it is for Chrome and Safari, but not yet for Firefox (announced for March 2018) and Edge (later on in 2018). But since Joomla 4 comes with support for IE11 a polyfill will always required. But don’t be upset about this, as the polyfill is 11Kb and aggressively tested by the developers that created it (that’s the Google Polymer team).

So why custom elements?

Let’s take a deeper look on the existing code related to tabs in Joomla 3.x:

• The script is old (Bootstrap 2)
• The script has 2 dependencies (Bootstrap and Jquery)
• The script requires inline code to initiate each tab collection
• A separate script is needed for the tab state (an option to keep the last known tab open for similar pages) which also has a dependency for a polyfill (80kb of javascript)!
• Total weight of all scripts required for the needed functionality is greater than 300Kb

On top of all this we end up with some trivial to remember HTML and Bootstrap classes.  But most importantly, we end up with a UI that does not comply to accessibility guidelines! All in all, not the best possible option! So we decided to go in another direction for the new script for tabs but also for the rest of the UI components. Here are the prerequisites that we set:

• Script should have no dependencies
• Script should have no inline code (we want to disable inline javascript through CSPs)
• Script should be fully accessible
• Script should include all the required functions (eg for the tabs, the tab state as well)
• Script should require only couple HTML tags and a few attributes
• Script and html/css should play nicely with any css framework
• Script should have a proper API (methods, events)
• Script should have proper Documentation
• Script should be written in ES6 (future proof)
• The total weight js+css should be under 40kb (for all the UI components combined)!!!

Links worth mentioning

• Joomla’s repo for the UI components (note this will be populated in ~1 weeks time - the temporary development repo is located here)
• Documentation (note this will be populated in ~1 weeks time - the temporary development repo is located here)
• A session in Joomla Day Germany (convert anything to custom element)

Joomla needs you!

This is an active project and has been pretty much a work in progress for more than half a year. This project is highly rewarding for the people that get involved, since they’re the ones that play and shape the essential building blocks that Joomla 4 will be using! Thus the Javascript team is inviting your involvement and collaboration with the team. Even if you’re not a Javascript expert, we have plenty of areas that someone could give a helping hand (from CSS, to documentation, to testing). Join one of the teams that is thriving to bring the current platform standards to our loved CMS! Join us here.