A compilation of Joomla 4 Custom Elements.
Clone or download
Failed to load latest commit information.
dist compile all Aug 14, 2018
docs compile all Aug 14, 2018
src Panels refactor SCSS (#92) Aug 18, 2018
test No switcher, so no switcher tests here... Feb 15, 2018
.editorconfig Create .editorconfig Aug 25, 2017
.eslintignore Ignore grunt Sep 8, 2017
.eslintrc.json fixes Aug 29, 2017
.gitignore Update .gitignore Aug 25, 2017
.hound.yml Update .hound.yml Sep 7, 2017
.scss-lint.yml cs Aug 27, 2017
.travis.yml Again Feb 15, 2018
Gruntfile.js update for alpha 3 Jul 20, 2018
LICENSE Update quickstart.md Jul 9, 2017
README.md more icons Feb 16, 2018
bower.json version 0.0.23 Jul 20, 2018
package-lock.json 0.0.25 Jul 20, 2018
package.json compile all Aug 14, 2018
saucelabs.conf.json fix’em all Sep 22, 2017
wct.conf.json Update wct.conf.json Sep 8, 2017


Joomla UI custom elements

Build Status

Travis-CI GreenKeeper Webcomponents.org
Build Status Greenkeeper badge Published on webcomponents.org
Sauce Labs
Build Status

UI components using modern technologies

This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).

Using the NPM power

You can install this package by using NPM:

$ npm i joomla-ui-custom-elements


The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming). Build your custom elements by executing:

$ grunt

The folder named dist contains all your elements.


For each component that you need to have available in your page you need to add the custom element in the head of the document:

<script src="joomla-alert.min.js"></script>


Once again we are using the great tools from the polymer team here! You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g. You might need to run that command as sudo! After that, in the root folder of this project just run wct and see the status of the tests...

The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5

Browser support

Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project). The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs


Fully documented here


The library is released under the GPL license