Amongst all the announcements at Google I/O, the search giant's annual conference, one of the more eyebrow-raising was its plan to let Android developers create their own HTML tags via Google's Web Components technology.
- Read all our HTML articles here
- Read all our web design articles here
At the event, Linus Upson, VP of engineering for Chrome, explained that an as-yet-unnamed framework, which he described as the "first toolkit to natively take advantage of Web Components", will enable you to reuse "bits of JavaScript, CSS and HTML" across different devices and platforms to make app creation faster and more productive.
"The goal here is to be able to allow developers to create their own tags, use them on a phone, and then take those same components onto a tablet," said Upson. He added that this idea is still at the early stages and not ready for use yet.
Context
So what does this all mean in practice? We spoke to Peter Gasston, author of The Modern Web and The Book of CSS3, to put the announcement into context.
"Custom elements is one part of the larger Web Components spec, which is being driven by Google but developed as a standard at the W3C," he explains. "Mozilla and WebKit are also working on implementations of various pieces of the spec.
"When you create a custom element you can attach extra markup, style and behaviour inside it, which are hidden from the DOM; this is like the way a video element has its own controls. Using custom elements you can create re-usable components which are encapsulated - that is, they can be applied across many pages without fear or markup pollution or interference from local styles or scripts.
Define and register
"It's not just a case of creating new elements on a whim; you can't just drop a new element into the page, you have to define and register it first," continues Gasston.
"Once registered, you can either include your new component directly into the page, or extend an existing element - to pluck an example out of the air, you could make a custom element to extend a button to include an attached to-do list. If you extend an element in this way, only the original element shows in the DOM, all of the extra custom markup will be hidden."
"So it's not a case of Google pushing random and arbitrary creation of new elements, it's an ongoing cross-browser effort aimed at building the next generation of interactive, modular pages."
For more details, see this article on hacks.mozilla.org and this explanation of custom elements.
