How to use the slim-js/Decorators.template function in slim-js

// Slimjs directives (i.e. repeat, if, etc.)
import 'slim-js/directives/all.js'

// import custom elements
import './components/header.js'
import './components/show-card.js'
import './components/show-info.js'
import './components/cast-memeber.js'

import AppTemplate from './app.template.html';


// application root custom element
@tag('awesome-app')
@template(AppTemplate)
@useShadow(true)
class App extends Slim {

  cleanupCards () {
    this.findAll('show-card').forEach(card => card.removeAttribute('selected'));
  }

  clear () {
    this.shows = [];
  }

  selectShow ({target: card}) {
    this.cleanupCards();
    card.setAttribute('selected', '');
    store.dispatch(searchActions.tvShowSelected(card.show));
    this.leftTransform = 25 - card.offsetLeft;

import { tag, template, useShadow } from "slim-js/Decorators";
import { Slim } from "slim-js";

import { searchActions, store } from 'redux-logic-layer';
import { debounce } from "../../helpers/debounce";

@tag('app-header')
@template(/*html*/`
<style>
  :host {
    line-height: 1.2;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--accent-color);
    color: var(--header-text-color);
    letter-spacing: 0.08rem;
    padding: 0 1rem 0 1rem;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 0;
  }

  :host * {</style>

import { Slim } from 'slim-js'
import { tag, template, useShadow } from 'slim-js/Decorators'
import { throttle } from '../control/utils/throttle'
import { calculateCircle } from '../helpers/calculateCircle'

@tag('pointer-overlay')
@useShadow(true)
@template(`
<style>
  div {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 9999;
  }
  
  path {
    fill: rgba(0, 0, 0, 0.5);
    fill-rule: evenodd;
    stroke: none;
    opacity: 0;</style>

import { tag, template, useShadow } from "slim-js/Decorators";

import { store, showInfoActions } from 'redux-logic-layer';
import { connect } from "../store/connect";

@tag('show-info')
@template(/*html*/`
<style>
  :host {
    transform: translate3d(150px, 0, 0);
    padding-right: 2rem;
    color: #444;
    transition: 850ms cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
  }
  :host-context([has-selection]) {
    transform: translate3d(0px, 0, 0);
    color: #efefef;
    opacity: 1;
  }
  a:visited, a:hover, a {
    color: inherit;
    text-decoration: none;</style>

import { tag, template, useShadow } from "slim-js/Decorators";

@tag('show-card')
@template(/*html*/`
<style>
  :host-context([has-selection]) {
    opacity: 0.06;
    pointer-events: none;
    filter: blur(3px);
  }
  :host([selected]) {
    opacity: 1;
    filter: blur(0);
  }
  :host {
    display: inline-flex;
    background-color: white;
    color: black;
    padding: 1rem;
    width: 14rem;</style>