14 DAY TRIAL // There's been some work lately on expanding HTML beyond its origins, transforming it into a language for the modern web, not just by adding new features, like HTML5 did, but by rethinking it from the ground up.
That's the idea behind the Shadow DOM, which is still taking shape, and behind the new Custom HTML Element APIs.
"HTML gives us an excellent tool for structuring a document but its vocabulary is limited to elements the HTML standard defines. What if the markup for GMail wasn't atrocious? What if it was beautiful," Google's Eric Bidelman asks.
"How refreshing! This app totally makes sense too. It's meaningful, easy to understand, and best of all, it's maintainable. Future me/you will know exactly what it does just by examining its declarative backbone," he writes, referring to the example code you see in the image above.
As the name suggests, Custom Elements enables developers to define new HTML elements that can extend (inherit) existing elements or be entirely new, i.e. based on the generic HTMLElement.
The benefits of custom elements should be obvious even to beginner developers. For one, it makes it possible to write much clearer and cleaner code. This custom code, despite using elements that devs may not be familiar with, is much easier to understand at first read and, thus, easier to maintain.
At the same time, custom elements also make it possible to purpose-built an element for your exact needs. You can then add custom properties and behavior but still use clean HTML syntax.
Custom elements become even more powerful when used with the Shadow DOM, making it possible to create fully isolated apps or widgets.
There's a new tutorial on HTML5Rocks describing the new feature and its uses cases. The current version of the specifications is only supported in Chrome 31, but Firefox should add support soon, as it already supports an older version.