What's a Web Component, Tho?

Although this is no new concept, many learners who are new to programming do not realize that making "custom HTML tags", or web components, is even possible. Even more surprising, many professional developers may miss out on the fact that there exist tons of open source web components that are free to download and use. In this blog, we are going to discuss how, exactly, open-source web components can be downloaded and used for development.

Step 1: Download Node.js

First, you’ll need to download Node.js, which will automatically provide you with all the necessary environment variables and tools needed to use NPM, or “Node Package Manager”. NPM is a very powerful command line tool which we’ll talk about very soon. For now, though, the first step will be to download Node.js. Below is a link to their download page:
[nodejs download]https://nodejs.org/en/download/

Step 2: Install Polymer Using NPM

To install polymer, navigate to your command line and enter the command:

npm install -g polymer-cli

If you’re on a Linux machine, you may also need to add the sudo command to run the command as an administrator. This will install polymer, which is a service that will allow you to host and view your webpage locally.

Step 3: Download Desired Open-Source Web Components Using NPM

Navigate, using the command line, to a folder on your hard drive within which you would like to store your project. Next, run the commands:

npm install @lrnwebcomponents\meme-maker

npm install @lrnwebcomponents\moar-sarcasm

These commands will bring in two example web components which will allow us to create memes in HTML, and also add sarcasm to our webpage text.

Step 4: Implement in HTML

Here are the tags I added within the body of my HTML file which should successfully import the remote web components, and of course, instantiate them on your webpage.

<meme-maker class="meme" top-text="Oh heck" bottom-text="A computar :DDDDD" image-url="computar.jpg"></meme-maker> <moar-sarcasm>whatsacomputertho</moar-sarcasm> <script type="module"> import {MemeMaker} from '@lrnwebcomponents/meme-maker'; import {MoarSarcasm} from '@lrnwebcomponents/moar-sarcasm'; </script>

Keep in mind, I'm using a local image in the meme-maker tag, so if you copy these tags into your project as-is, it is likely that no meme will show up.

Step 5: Serve Locally Using Polymer

Back in the command line, navigate to your project folder and execute the command:

polymer serve

Then, once it returns an IP address and port number, copy it into your browser's search bar. This should take you to your webpage, and you should be able to see your successfully instantiated web components.