Put Web Components in your Square Space Site with Angular 15

Use the power of web components in Square Space pages with HTML Script Tags

This post will cover how to get a web component working in a square space site, as I couldn’t find a step-by-step complete answer anywhere online.

Generate Your Component Files

If you’re interested to learn about how to generate a web component using angular 15, check out this post. If you’ve already got the part figured out where you’ve got your web component, nice!

I won’t go into this any further here save to say, because of the standardized nature of Web Components, you can build them with any framework or tool-kit that produces the resources needed for the page to understand what your web component is.

The required resources for your components are:

• the JS that makes your component do its tasks

• the CSS that styles your component

• the HTML that makes the skeleton and structure of your component

• the JS that declares your component to be a Web Component and gives it a tag name e.g. <your-component-tag></your-component-tag>

Getting those resources into the Square Space page is actually the part that took me the longest to understand. Let’s cover that next.

Getting resources into Square Space

JSDelivr is a really cool thing. Did you know you can deliver static assets from a GitHub repo to any place on the web using JSDelivr as a CDN? Certainly better than paying AWS for it!

1. Create your GitHub repo

2. Add your code resources there

3. Use the jsdelivr cdn link format to reference them as a CDN - see code below for examples of how to do CDNs from GitHub

4. Create a custom code block with the type of HTML somewhere at the top of your page or post

5. In that code block, add the scripts for your resources, it should look something like this below.

Now that you can access your resources

You’ll notice that no web component appears. You may already be wise to this if you’re experienced with them already, but there is not an HTML tag in the DOM to reference your component just yet. We need to make your custom work emerge from the darkness.

Making Your Web Component Appear

Make your web component appear in the Browser

The journey is almost finished, now we only have to add the script tags for your element wherever you want it so you can see it working.

I chose to put it right below this next paragraph.

You should see an example angular material component, with styles that are external to the Squarespace theme applied. It should also have functionality that is independent of any code that is a part of the site builder, theme, or anything related to Squarespace.

To make the component appear like above, I added a code block, and inside that I added the HTML tag for my web component, which was just:

<app-example-web-comp></app-example-web-comp>

Unstyled dom elements will take styling from your current theme. Which can be cool! It allows a component to automatically share styles with your theme.

The downside is that can impact the look you had planned for the component. So it’s best to ensure that the styles you specify are unique from your existing Square Space theme, and potentially even mark them as !imporant.

Conclusion

It’s possible to get Web Components working in Square Space using the tool kits square space provides. Ensuring that your page can access the resource files that form your Web Component wh is the first step, and placing your component somewhere in the DOM is the second step.

Major props to this post for inspiring me to continue with this project, as I almost gave up on the idea because I didn’t know for sure I’d be able to get everything working together smoothly. Seeing it working for someone else was all the confidence I needed to carry on.

If you want more on this topic, don’t be afraid to reach out via one of the contact means below..