Using Unbundled Web Components for Dynamic Imports
Tags: webcomponents
Published: 2020-10-23 13:53:18

If you've been following along with this series of baby steps, you have already tried [using a custom element](https://dev.to/nikkimk/using-a-custom-element-2mda) with our CDN's "magic script", but now you have found other web components you want to use, so you'll need to make your own "magic script" to dynamically import unbundled web components. (See [this series on unbundled-webcomponents](https://dev.to/btopro/series/7803) for more info.)

This post will walk you through collecting your unbundled web components and generating a "magic script".

![elmsln/unbundled-webcomponents on GitHub](https://dev-to-uploads.s3.amazonaws.com/i/ef5g01yi5yzzzhou53tp.png)

##Set Up a Clone of unbundled-webcomponents
1. Install [yarn](https://classic.yarnpkg.com/en/docs/install/).
2. Clone the unbundled-webcomponents project: ```
git clone https://github.com/elmsln/unbundled-webcomponents.git
```
3. Go to the `unbundled-webcomponents` directory: ```
cd unbundled-webcomponents
```

##Find Your Components on npm
1. From [npm](https://www.npmjs.com) search for the `accent-card`. 
2. Note that accent-card is listed as `@lrnwebcomponents/accent-card` 
3. Note that import statement that appears under __Usage__ is `import '@lrnwebcomponents/accent-card/accent-card.js'`
4. Repeat steps 1-3 with other the components you wish to use. 

![accent-card on npm](https://dev-to-uploads.s3.amazonaws.com/i/cimhgspetpwlrkbqwtsa.png)

##Add the Web Components You Want 
1. From your `unbundled-webcomponents` directory add accent-card to your list of dependencies in `unbundled-webcomponents/package.json`: ```
yarn add @lrnwebcomponents/accent-card
```
2. Inside `unbundled-webcomponents/dist/app.js` file add the Javascript import: ```
import '@lrnwebcomponents/accent-card/accent-card.js'
```
3. Repeat steps 1-2 with other the components you wish to use. 

![unbundled-webcomponents/dist/app.js file](https://dev-to-uploads.s3.amazonaws.com/i/3pvk4q2o1g8a76li0x1u.png)

##Building Your "Magic Script" and Curating Your Component Javascript Files
1. From your `unbundled-webcomponents`, install your components and dependencies: ```
yarn install
``` 
2. From your `unbundled-webcomponents`, build your `dist` folder: ```
yarn run build
``` 
3. Upload the `local-path-to-your/unbundled-webcomponents/dist` folder to a server location.

##Using Your Very Own "Magic Script"
1. Add the following script to your page(s): ```
<script>
  window.__appCDN="https://path.to.your/unbundled-webcomponents";
</script>
<script src="https://path.to.your/unbundled-webcomponents/build.js"></script>
```
2. Use the web components you selected to your HTML pages, just as you did in [my first post](https://dev.to/nikkimk/using-a-custom-element-2mda): ```
<accent-card accent-color="red" dark horizontal image-src="https://webcomponents.psu.edu/styleguide/elements/accent-card/demo/images/image1.jpg">
<h1 slot="heading">Look at this card</h1>
<div slot="content">This is the card content.</div>
</accent-card>
``

The more you use web components, the more uses you will find for them. In the not too distant future, I'll put something together on how to make your own.