Using Polymer Web Components

4m

Earlier this year, I started to explore more of the possibilities that Framer X has to offer when it comes to design systems not built using React.

I started off this exploration with a web component Framework called StencilJS. After reading more into the world of web components, I quickly learned about other tools and methods for building these custom HTML elements.

Then I discovered a library called Polymer, a project developed by engineers at Google, designed to make building complex web apps more accessible and efficient. Polymer is built on top of other popular design methodologies, most notably their own design framework, Material Design.

While Polymer aims to solve a complex problem by providing a reusable solution for creating components and apps, I chose to continue my journey exploring the world of web components. I decided to re-build a small design system in Polymer and use it inside Framer X.

Building Polymer Components

To start this exploration, I first needed some components to work with. Heading to the Polymer Project website, I found a few different options to get started. They offer different options based on whether you're looking to create thing for everything from web apps to web components. I ended up starting a project using LitElement, a simple starting point for creating reusable web components.

After getting the first few things set up, I was ready to start building my components. I decided to rebuild the component library we created in the Framer Bridge Starter Kit, which was built to show one of the ways to use a design system in Framer X. The docs for building LitElements are great, which makes it really straightforward when it comes to building a few simple UI elements.

There was only one other thing I needed to add to my components. This part isn't necessary unless you’re going to use your components in Framer X. LitElements extend a class component in JavaScript. If we want to use them in Framer X we need to make sure we export the class from the file so we can use them in a later step. Here's an example of what that looks like.

From here, we're ready to publish the components to the NPM registry.

Using Polymer components in Framer X

Now we can move onto adding these components to Framer X.

The first step was to install my newly published package. Luckily, Framer X makes it easy to install packages from NPM. Then I wrote a small script that defined the custom-elements I wanted to use. After that, I was able to include this file in the code folder of my Framer X project which made it possible to use my web components. From there I was able to add my web components to a .tsx file so I could see them in my project. My component file looked like this.

Wrapping up

Working with Polymer was great, and definitely helped me grasp another way of understanding how web components work.

The components I made are available on Github and NPM. The Framer X project I created that uses these components can be found here.

As always, feel free to reach out to me on Twitter with any questions or comments.