Helpful tools
It’s possible to code web components in JavaScript with nothing extra installed, but the use of these tools can make development much easier.
Node.js is an event-driven runtime environment for JavaScript,. It can build modular web servers and process user actions and other events for the program.
npm, node package manager, is an online repository for Node projects, a utility for interacting with the repository through the command-line, and it is also incredibly useful for dependency management. It allows a user to install packages in one command and will update package.json files for you.
Lit is a library for building web components, useful for both existing templates and easily building custom elements using HTML and JavaScript.
Oh My Zsh is a framework for plugins, functions, and themes to help manage your terminal shell.
Git is an open-source system used for version control. It tracks the code as you change or add to it and can be used to help distributed collaborators stay organized when working in parallel.
Open Web Components is a great tool for accessing open-source web components and is very easy to set up with their quickstart guide and easy to understand documentation.
Creating the Component
After installing the tools used, create a folder to store your project in. Navigate to this folder using the terminal.
Once in this directory, type npm init @open-wc into the terminal, which will install and start open-wc.
From there you can scaffold a new project for a web component and edit the source code as you wish to manipulate your component.
This is code for a sample Hello World web component, based on the Lit Playground example.
Import the code to the index file, and enter npm start to bring up a local server that displays your new web component.
You can view the code I used to build this component in my GitHub repo for the project.
Top comments (0)