Considerations for Building a Web Component

There are a lot of things to consider when creating a new web component. What attributes and properties do we need? How are we going to style it? Are there accessibility concerns? What about security? The list goes on. Today, I'll go through the thought process of a making a new component with an example.

The Design Comp

As you can see in the image above, we are going to make a "learning card" that consists of a couple things.

1. An SVG icon
2. Banner with Header and Subheader
3. Slotted HTML in the bottom

If we consider the design there's a few things we want to be mindful of when putting this thing together. First off, you might notice the color and icon match a different subheader. So maybe we want to check the subheader to set the color and icon. You might also notice there are different fonts, font sizes, and padding to consider. Design-wise this should be relatively simple, as long as we can make everything responsive and set the overflow.

Let's Break It Down

Looking at the comp above, we can break it down into one component consisting of three other components.

1. Icon with circle around it
2. Banner with Header, Subheader, and Icon component
3. A "skeleton" or outline of the card (A component with something in the top and something in the bottom)
4. Put these all together to make a "learning card"

By breaking this component down, we'll be able to reuse any of these components in the future, and we can have more control over how things interact. For each of the components we'll have to ask ourselves those initial questions:

• What are the props and attributes?
• Design concerns?
• Accessibility?
• Security?

Once we have an answer to each of these questions, we tackle each component until we are able to put everything together.

Expectations and Previous Experience

I expect this component will be relatively easy to put together. However, there are a few things that I think might be challenging. The first is I don't know much about slotting content. This will be done in the "skeleton" / outline component, and we want to make sure that any HTML can be arranged in the card. The second challenge will be keeping the design consistent. We want the left margin to be consistent in the bottom half, and make sure content overflows in a natural way for both the banner and the bottom portion. If we can make the card responsive and slot content properly, then I think this will be a really good example of atomic design.

In the past I made a penguin button, and I learned some valuable things from this experience. After that project, I have a better understanding of using properties to control the different attributes on a web component. I also learned a cool way to control the style of the component using CSS variables and Open WC's API. Overall, I learned how to answer those initial questions before creating the component which will be valuable when building this card.

elmsln / project-two

Edtechjoker project two - card

Open-wc Starter App

Quickstart

To get started:

npm init @open-wc
# requires node 10 & npm 6 or higher

Scripts

• start runs your app for development, reloading on file changes
• start:build runs your app after it has been built using the build command
• build builds your app and outputs it in your dist directory
• test runs your test suite with Web Test Runner
• lint runs the linter for your project
• format fixes linting and formatting errors

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

View on GitHub