Web Components: Even Better With Semantic Markup

By on

W3C Logoby Jennifer Zaino

The W3C’s Web Components model is positioned to solve many of the problems that beset web developers today. “Developers are longing for the ability to have reusable, declarative, expressive components,” says Brian Sletten, a specialist in semantic web and next-generation technologies, software architecture, API design, software development and security, and data science, and president of software consultancy Bosatsu Consulting, Inc.

Web Components should fulfill that longing: With Templates, Custom Elements, Shadow DOM, and Imports draft specifications (and thus still subject to change), developers get a set of specifications for creating their web applications and elements as a set of reusable components. While most browsers don’t yet support these specifications, there are Web Component projects like Polymer that enable developers who want to start taking advantage of these capabilities right away to build Web objects and applications atop the specs today.

“With this kind of structure in place, now there is a market for people to create components that can be reused across any HTML-based application or document,” Sletten says. “There will be an explosion of people building reusable components so that you and I can use those elements and don’t have to write a ton of obnoxious JavaScript to do certain things.”

That in itself is exciting, Sletten says, but even more so is the connection he made that semantic markup can be added to any web component.

It’s possible to create a component and use RDFa or microdata or embedded JSON-LD in it, and the use of those standards to encode metadata means that that component becomes self-describing, he explains. While the implementer of the components is free to use semantic web technologies, the end user can take advantage of that without the intermediate web developer having to care, he says.

Here’s an example: Say that Sletten has created a product web component that understands RDFa and the Good Relations ontology. Developers can take advantage of that to create a web app that takes product summary elements – for instance, for the same refrigerator – from Best Buy, Amazon and WalMart, without even knowing they are using semantic web technology. “And yet they are,” he says. This can then be leveraged by users to “grab the price, warranty and other information from each retailer to show in a spreadsheet.”

Or, a web component custom element for person entities might use RDFa with schema.org tags, so the information about an individual’s name, birthday, affiliations and so on can be stripped off for use by anyone. “When I say parse RDFa on this page, it goes through and finds all the people, here is X’s birthday, and so on, with no connection between these things,” he says. But, “the instance of using my element doesn’t require the client to know anything about RDFa or the semantic web.”

The information is there in a machine-processable way, though, so those that do realize they are leveraging the semantic web might be able to take their applications to the next level, he says. An enterprise developer can assemble summaries, for example, that pull information from self-describing elements in web apps to produce weekly sales reports that include visual representations for humans, but also can extract the salespeople mentioned in the reports and what they sold and connect that to the company’s product database.

“It’s still early days but we will see some movement in this direction,” he says. “But again, the experience for the average developer will be more like, ‘Here is a collection of components, here’s one that understands markdown/markup language, here’s how you use it, and here it is in action. If I used RDFa behind-the-scenes, all the structures in the rendered component could be made available, but the person in the middle doesn’t need to think of it.”

Sletten wants to be clear that, as the specifications are still in draft, people shouldn’t “base their entire development on these specifications yet, but it is certainly time to start investigating and they should start to play around with things.”


We use technologies such as cookies to understand how you use our site and to provide a better user experience. This includes personalizing content, using analytics and improving site operations. We may share your information about your use of our site with third parties in accordance with our Privacy Policy. You can change your cookie settings as described here at any time, but parts of our site may not function correctly without them. By continuing to use our site, you agree that we can save cookies on your device, unless you have disabled cookies.
I Accept