Issue 2

Preview Webcomponents

A really minimal way to create a WebComponents previewer is storing the component as a template in an HTML document and then appending this Javascript snippet on it.

Here's an outline of this code structure:

let template = document.querySelector("template");
if(!document.body)
  document.body = document.createElement("body");
document.body.appendChild(template.content);

If you attach this code at the end of a component structured as:

<template>
  <style>...</style>
...
</template>

You get to easily preview the component. A limitation here is that you have to adhere to this convention of storing components as an HTML document.

Tomasz Jakut has written a neat article on how to do store WebComponents as a single file. It’s well worth a look if you want to store your components as separate files.