Please have a look at [1], simple tutorial for Shadow DOM. It would be nice if HTML editor would offer code completion inside <template> element, just like in "normal" HTML file - that includes HTML completion, CSS in <style> element and possibly JS inside <script> 



Sample Shadow DOM:
<div>
<template id="nameTagTemplate">
<style>
.outer {
  border: 2px solid pink;
  border-radius: 1em;
  background: url(sakura.jpg);
  font-size: 20pt;
  width: 12em;
  height: 7em;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
}
.name {
  font-size: 45pt;
  font-weight: normal;
  margin-top: 0.8em;
  padding-top: 0.2em;
}
</style>
<div class="outer">
  <div class="name">
    <content></content>
  </div>
</div>
</template>
</div>


[1]