DEV Community

SparkedScience
SparkedScience

Posted on

Using Web Components

Let's just get this out of the way.
JavaScript sucks.
Ok, now onto the real content.

Web components

Web components are very helpful for web development. They allow developers to create their own HTML tags and define their behavior. Using them is actually extremely easy, if you are used to the command line. npm, to be exact. One of the larger public repos of HTML tags is the lrnwebcomponents Github repo. But, you can find the full library at the Web Components home page. It also has getting started resources, making this post obsolete, but I'm going to keep typing anyways.

Using Web Components

Once you find a web component you like, the first step is to download it. Simply type npm install [tag] into your terminal. So to download moar-sarcasm, you would type npm install @lrnwebcomponents/moar-sarcasm. You can then reference the tag as many times as you want in your project, provided you import it first. There are different imports for different file times and resource locations. The lrnwebcomponents repo has code snippets for how to use each tag, which I relied on heavily. Basically, the best way is to use a JS import statement, which is just importing the name of the tag, like so: import "@lrnwebcomponents/moar-sarcasm". (Fun note; all web components need to be hyphenated. Learned that this week.) Then you can use the tag as normal.

My Experience with Web Components

One last short bit. I personally love web components. The large library of already made web components gives developers a large variety of code to reuse, which I love on the front end. I am more of a back end dev, so any help and/or cheating on the front end is amazing. JavaScript is JavaScript, but maybe I just need to relearn it. Maybe then I won't hate it. Moral of the story, JS bad, WC good.

Video

Remember to eat your grapes today. Or raisins. Who am I to judge how you like your grapes?

Top comments (0)