Using a Custom Element

Recently I gave a lightning talk for the HighEdWeb Associations's annual conference called "Old School HTML with Modern Web Components" making the case for web components.

Since then I've been getting lots of follow-up questions about how to get started. I think what scares most people off of them is that we often start with how to make your own, which is honestly doesn't give you the immediate return on your learning investment. So what I've decided to do a series that starts at a much easier and more immediately rewarding point.

For newcomers dependencies, bundling, and polyfills are a bit intimidating, so for now, let's use a script where all of that has been taken care of for you. To that end, let's with the simplest most useful task: using an existing web component with a single script.

1. Add the Javascript. We have a CDN for the web components we use. Add the following script to any HTML page:
   

   <script> 
   window.__appCDN="https://cdn.webcomponents.psu.edu/cdn/"; </script>
   <script src="https://cdn.webcomponents.psu.edu/cdn/build.js"></script>
   

2. Use the custom element HTML. For example, try accent-card:
   

   <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>
   

3. Make some changes. Check out the accent-card demo to learn how to change the card's accent-color, orientation, heading, content, and more.

4. Try more custom elements. Browse our CDN to try more:

   • a11y-figure
   • a11y-media-player for video
   • a11y-media-player for YouTube
   • a11y-tabs
   • a11y-collapse
   • nav-card

Next you'll learn how to make your own magic script for dynamically importing web components.