When it comes to making resuable, interactive elements in HTML, we’ve had quite the evolution - from pinching scripts from DHTML Goodies through to jQuery plugins and jQuery UI. Whilst these approaches and always provided the goods, if you’ve been bitten by the semantic bug, you’ve probably felt something was missing.

What once was… jQuery UI

jQuery UI is awesome and no doubt is responsible for improving the productivity of developers worldwide, but if you’ve been digging around in it’s source code you’ll know that it’s no fun trying to follow all that DOM manipulation, appending this, prepending that, it soon becomes unmanageable.

Towards the future

Web Components provide an all-encompassing, structured approach to building custom elements, or widgets if you prefer.

Web Components bring harmony to widget development by unifying a series of areas of development that have largely been developing and progressing in isolation. If you’ve been developing your own interactive UI components you definitely have come across at least two (if not all) of the high level facets of web components:

Bridging the gap

Unfortunately the magnitude of change caused by Web Components means leaning on a ton of new, native browser features. Like all progressive web development, we can’t reliably have our code work correctly across browsers.

More reading

Keep on eye on progress.