Barcode Web Components
Web ComponentsWeb Components are a set of web platform APIs, maintained by the World Wide Web (W3C) consortium, and supported natively by all modern browsers, that enable developers to create custom, reusable and encapsulated HTML tags for use in web pages and applications.
- Google Chrome 65.0.3325.181 (or above)
- Android Chromium 64.0.3282.137 (or above)
- Opera 54.0 (or above)
- macOS Safari 12.0 (or above)
- iOS Safari 12.0 (or above)
- Mozilla Firefox Quantum 59.0.2 (or above)
- Microsoft Edge 76+ (Chromium based) (or above)
- ConnectCode Barcode Fonts and Software
- Polymer 3.0 is installed
npm and Node.js is installed
Polymer CLI is installed
After the "polymer serve" command, launch your browser and point it to "http://127.0.0.1:8081/" to make sure that the Polymer project can be run successfully. If you already have an existing Polymer project, you can install "lit-element" by executing the following command on your project.
All the above resources are available in the ConnectCode Barcode Software and Fonts package. The barcode fonts and encodation library by ConnectCode has been proven in the industry to meet the strictest requirements of the specifications, and has been deployed by many organizations around the world. This ensures the barcode generated by the Web Component is of the highest quality required by the industry.
Note - If you are using the msix style installer for Windows 11, the "PolymerWebComponents" folder is in the "Resouce.zip" file.
Note: You will need to create the "js" subfolder in the "start-lit-element\src" folder in the process.
2b. Copy the source code to define a Polymer Web Component using LitElement from
2b. Copy the Style Sheet to apply the font from
Copy the Code 128 Barcode Font from the following
Resource\WOFF2\fonts\ConnectCode128_S3.woff2 (or Resource\WOFF2\fonts\ConnectCode128_S3_Trial.woff2)
Note: You will need to create the "fonts" subfolder in the "start-lit-element\src" folder in the process.
You can control the size of the barcode by setting the Font Size or choosing a different font. For example, the "S3" in "ConnectCode128_S3.woff2" refers to the height of the font relative to its width. Generally, there are a total 7 fonts ("S1" to "S7") for the Code 128 barcode with "S1" having the smallest height to width ratio and "S7" with the largest height to width ratio. The complete set of fonts has been proven over years to generate the highest quality barcodes that meet all size requirements required the industry specifications.
The Polymer Web Component source code of "barcode-code128auto.js" is shown below:
The source code for the Web Component is deliberately kept simple and easy to understand. The main aim is to ensure that you can easily make changes and integrate with your existing component libraries, a request from many of our enterprise customers. The "barcode_code128auto" element is used for displaying the barcode. The "barcode_text_code128auto" element is used for displaying the human readable text that commonly appear below the barcode. Please note that the human readable text may not always be the same as the data encoded in the barcode. For example, in a Code 128 barcode, a mandatory hidden check character is embedded in the barcode but this character is never displayed in the human readable text for compliance reasons.
On the other hand, an EAN13 barcode sets the Extended Style option through the following:
The @font-face tag defines a font family for the "ConnectCode128_S3.woff2" (or "ConnectCode128_S3_Trial.woff2") barcode font. This font is then applied to the "barcode_code128auto" class for displaying the barcode.
Please refer to the Polymer Barcode Web Component API for more information on the programming interface.
5. The final step is to use our Barcode Web Component in the "index.html" file of our Polymer project and apply the Style Sheet. Add the following line immediately after "<head>" to include the Style Sheet.
You may be wondering why a Style Sheet is required when we are using an encapsulated Web Component. If you look at the contents of the Style Sheet, it is similar to the CSS Style defined in our Web Component template. The reason for including the Style Sheet is because some browsers currently have issues/bugs with the @font-face tag in a Polymer Web Component template. The safest catch-all workaround is to include the Style Sheet outside the template. With upcoming versions of browsers that resolve this bug, this step will no longer be required.
Next, add the following line to load the "barcode-code128auto.js" element.
The above line can be added after the "import" for "start-lit-element.js" as shown below:
To use our Barcode Web Component, simply add the "
You can also comment out the "start-lit-element" to focus on the "barcode-code128auto" element. The "Resource\PolymerWebComponents\index.html" contains reference source code for generating all the different types of barcodes with their required parameters.
Launch the browser and point it to the following:
You should see a Code 128 barcode generated using Polymer and displayed with a WOFF2 barcode font. This barcode can be printed to printers with any resolution and the barcode is able to meet all the quality requirements of the auto-id industry. The registered package comes with other fonts to help you meet the size requirements of specifications such as those required by GS1.
Please refer to the Polymer Barcode Web Component API for all the barcodes supported.