Using External Web Components with Enhance

Original photo by Bon Vivant on Unsplash

We love building web components with Enhance, but we realize that sometimes you may need to pull one off the shelf to include in your app. Follow along to see how to add a Vanilla JS web component to your Enhance app.

VanillaWC

VanillaWC touts itself as:

An open-source collection of Web Components implemented in vanilla JavaScript

I like that VanillaWC has no extra layers of abstraction between you and the web components. That means no dependencies and no additional build steps. It’s like they are speaking our language. For this blog post, we will focus on wc-social-link, which enables you to add links to your GitHub, LinkedIn, Twitch, etc., to your page.

Option 1: CDN

The easiest way to include the social link component on a page is to load it remotely from a CDN at runtime. For example:

<script
  type="module"
  src="https://cdn.jsdelivr.net/gh/vanillawc/wc-social-link@1/index.js">
</script>
<wc-social-link
  network="github"
  handle="enhance-dev">
</wc-social-link>

That will add a GitHub icon to your page that links to the Enhance organization on GitHub.

Pretty easy, right? However, if you have added a Content Security Policy to your app, and you should, then you may not want to add a remote domain to your allow list.

Option 2: Bundling

Instead of trusting a 3rd party domain, we’ll install wc-social-link locally by running:

npm install @vanillawc/wc-social-link

The wc-social-link project ships with a nice entry point for a bundle. We will bundle and expose wc-social-link’s main index file as wc-social-link by updating .arc with:

@bundles
wc-social-link './node_modules/@vanillawc/wc-social-link/src/wc-social-link.js'

Then you would load the web component from it’s bundled path in your page:

<script type="module" src="/_public/bundles/wc-social-link.mjs"></script>
<wc-social-link
  network="github"
  handle="enhance-dev">
</wc-social-link>

Next Steps

Well, getting a web component written by a 3rd party into your Enhance app wasn’t too difficult. The downside is this component only works with client-side rendering. Next week we’ll show you how to refactor components like this so they can be server-side rendered and enhanced with client-side JS.