U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you're on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Skip to page content

The API Briefing: Introduction to Web Components

Web Components light logo

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. (This list does not imply endorsement by the federal government. These are just illustrative examples):

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?*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._

Tags: ,

GitHub LogoEdit
Top