The API Briefing: Introduction to Web Components

Instead of writing about a specific federal API this week, I want to talk about a new, evolving way of building Web interfaces and complete applications. Web Components allow developers to create their element that extends the HTML5 set of tags. Developers can create a Web Component that is a button that performs a specific function, such as composing and sending an email. Alternatively, a Web Component can be a complete application that a developer can easily drop into a Web page or mobile app.

Developers can do that now just by using JavaScript libraries such as jQuery or Bootstrap and swapping code through GitHub. What makes Web Components different is that the components can be encapsulated. That means that all a developer has to do is import the Web Component into the HTML page or mobile app without having to load the necessary JavaScript libraries or any other files. It is essentially plug-and-play pieces for the Web page/mobile app.

Web Components are self-contained because of four technologies. First, there are Custom Elements which allow the developer to create a customized HTML element. The custom element can have its properties and methods. The second technology is the HTML Template Element. The HTML Template can hold HTML content that isn’t displayed until triggered by a JavaScript event.

Shadow DOM is the third technology. DOM stands for the “document object model” and is a map of the HTML document. A DOM is used by JavaScript and Cascading Style Sheets (CSS) to make changes to an HTML page according to user interaction or a JavaScript program. The Shadow DOM is used by the Web Component to hold JavaScript and CSS separate from the main DOM.

The fourth technology is the HTML Import which packages the Web Component and allows the developer to include Web Components into the Web page or mobile app. As you can guess, APIs are working behind the scenes to make each of these technologies work.

If you would like to learn more about Web Components, you can start with these resources.:

• A technical introduction to Web Components
• A video presentation of the potential of Web Components (33 minutes)
• Webcomponents.org
• Google’s Polymer
• How the Angular JavaScript library differs from Google’s Polymer
• Component Kitchen’s interactive Web Components tutorial
• How to create your HTML elements using Web Components

Web Components present another way that federal agencies can package and distribute their APIs. Maybe a possible new project is to create a federal Web Components library for website developers and mobile app developers?

Disclaimer: All references to specific brands, products, and/or companies are used only for illustrative purposes and do not imply endorsement by the U.S. federal government or any federal government agency.

*API – Application Programming Interface; how software programs and databases share data and functions with each other. Check out APIs in Government for more information.

Each week, “The API Briefing” will showcase government APIs and the latest API news and trends. Visit this column every week to learn how government APIs are transforming government and improving government services for the American people. If you have ideas for a topic or have questions about APIs, please contact me via email. All opinions are my own and do not reflect the opinions of the USDA and GSA.