How to use the slim-js/Decorators.useShadow 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;
    this.topTransform = 15 - card.offsetTop;

<h1>{{show.name}}</h1>
  <div>
    Genres: <span class="genre">{{genre}}</span>
  </div>
  <p>Language: {{show.language}}</p>
  <p></p>
  <a>Visit Website</a>
  <div>
    <h2>Cast:</h2>
    <div id="cast-list">
      
    </div>
  </div>

`)
@useShadow(true)
class ShowInfo extends Slim {

  @connect('showInfo')
  onShowChanged (data) {
    this.show = data.isOpen &amp;&amp; data.info;
  }

  close () {
    store.dispatch(showInfoActions.setModalState({state: false}));
  }

  getSummary(info = {}) {
    return info &amp;&amp; info.summary ? info.summary : 'No Summary';
  }

}

flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid rgb(215, 215, 215);
  }

  :host img {
    border-radius: 0.5rem;
  }

<h3>{{show.name}}</h3>
<img>
`)
@useShadow(true)
class ShowCard extends Slim {}

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;</style>

left: 1.2rem;
  }

  #searchbox {
    position: relative;
  }


<h1>Redux❤️slim.js - Middleware example</h1>
<span id="searchbox">
  <input placeholder="Search…" type="text">
  <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24" id="icon"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="var(--header-text-color)" stroke="none"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
</span>
<span id="logo"></span>
`)
@useShadow(true)
class AppHeader extends Slim {

  constructor () {
    super();
    this.doSearch = debounce((text) =&gt; {
      store.dispatch(searchActions.getTvShows({q:text}));
    });
  }

  onSearch (event) {
    this.doSearch(event.target.value);
  }

}