Shadow Classes

Lightweight utilty that associates html5 templates with classes and injects them as shadow dom when declared.

Inject shadow dom into html so that presentation markup stays in shadow dom and semantic markup stays in light dom.

####Example

######1) Declare templates

<template class="template-article">
  <style>
    /** Isolated styles */
    :host { }
  </style>
  <content></content>
</template>

<template class="template-header">
  <svg><!-- Presentation markup --></svg>
  <div><!-- Div Soup --></div>
  <content></content>
</template>

<template class="template-main secondary-class-name">
  <!-- Two class names -->
  <content></content>
</template>

<template class="template-footer">
  <content></content>
</template>

<template class="multiple-shadow">
  <!-- You can shadow another shadow dom -->
  <shadow></shadow>
</template>

######2) Inject templates as shadow dom

<article class="template-article">
  <header class="template-header">
    <h1>Shadow classes</h1>
  </header>
  <main class="secondary-class-name">
    <p>
      A template matching mechanism to bind semantic markup to presentation markup.
    </p>
  </main>
  <footer class="template-footer multiple-shadow">
    <p>This is a footer</p>
  </footer>
</article>

Nested

Shadow dom will also be injected as declared when a template is imported.

<template class="another-shadow-class">
  <p><content></content></p>
</template>

<template class="shadow-class">
  <!-- The div will have a shadow root too! -->
  <div class="another-shadow-class">
  </div>
</template>

Dynamically added shadow dom

Shadowdomize will detect changes in the dom and inject shadow dom.

Caveat: Currently, if you remove a class, the shadow dom will not be deleted.

<template class="template-dynamic">
  <!-- The shadow dom will be inserted if new elements or class names get added -->
  <content></content>
</template>


<button onclick="this.className='template-dynamic'">Click to add shadow dom</button>

<button onclick="this.className=''" class="template-dynamic">Won't work</button>