Web Components — будущее Web

1. Не совсем понял мысль вашу мысль о Shadow DOM. Приведу ещё один пример его использования.
   
   
   Так выглядит разметка строки поиска google.com

   <fieldset class="gbqff gb_j" id="gbqff">
     <legend class="gbxx"></legend>
     <div id="gbfwa" class="gbqfwa ">
       <div id="gbqfqw" class="gbqfqw ">
         <div id="gbqfqwb" class="gbqfqwc">
           <table cellspacing="0" cellpadding="0" id="gs_id0" class="gstl_0 lst-t" style="height: 27px; padding: 0px;">
             <tbody>
               <tr>
                 <td id="gs_ttc0" style="white-space: nowrap;" dir="ltr"></td>
                 <td id="gs_tti0" class="gsib_a">
                   <div id="gs_lc0" style="position: relative;">
                     <input id="gbqfq" class="gbqfif" name="q" type="text" autocomplete="off" value="" style="border: none; padding: 0px; margin: -0.0625em 0px 0px; height: 1.25em; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;" dir="ltr" spellcheck="false">
                     <div class="gbqfif" id="gs_sc0" style="background-color: transparent; color: transparent; padding: 0px; position: absolute; z-index: 2; white-space: pre; visibility: hidden; background-position: initial initial; background-repeat: initial initial;"></div>
                     <input class="gbqfif" disabled="" autocomplete="off" aria-hidden="true" id="gs_taif0" dir="ltr" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; left: 0px; visibility: hidden;"><input class="gbqfif" disabled="" autocomplete="off" aria-hidden="true" id="gs_htif0" dir="ltr" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; transition: all 0.218s; -webkit-transition: all 0.218s; opacity: 0; left: 0px; text-align: left;">
                   </div>
                 </td>
                 <td class="gsib_b">
                   <div class="gsst_b" id="gs_st0" style="line-height: 27px;" dir="ltr">
                     <a class="gsst_a" href="javascript:void(0)" aria-label="Listening for "Ok Google"" style="display: none;"><span class="gsri_ha gsst_e" id="gsri_hok0"></span></a><a class="gsst_a" href="javascript:void(0)" aria-label="Search by voice"><span class="gsri_a gsst_e" id="gsri_ok0"></span></a>
                     <div id="chmo">
                       <div id="chm">
                         <div class="chmp">
                           <div class="chmpi chmp"></div>
                         </div>
                         <div style="display: none;">
                           <div class="chma"></div>
                           <div>Not listening. Something went wrong.</div>
                           <div><a>Restart listening</a><a style="padding-left: 10px;">Help</a></div>
                         </div>
                         <div style="display: none;">
                           Hotword detection is off.
                           <div><a>Start listening for "Ok Google"</a></div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </td>
               </tr>
             </tbody>
           </table>
         </div>
       </div>
     </div>
   </fieldset>
   

   
   
   
   Очень много «низкоуровнего» кода. Shadow DOM позволяет скрыть детали реализации элемента и инкапсулировать его стили, чтобы они не конфликтовали с документом. Таким образом в документе строка поиска будет выглядеть как-то так:
   
   

     <div class="google-search"></div>
   

   
   
   Или так, с использованием custom elements:
   
   

     <google-search></google-search>
   

   
   
   Детали реализации будут изолированны и лежать где-то в другом месте. Это похоже на разделение интерфейс/реализация в объектно-ориентированных языках.
   
   
2. Подобие custom elements можно написать самому, тут вы правы. Они уже есть в некоторых фреймворках. Ничего нового, только теперь браузер будет поддерживать это нативно.
   
3. <template> это не совсем шаблонизатор. Его задача не в том, чтобы взять данные и подставить их в разметку. Это скорее «хранилище» html кода, который вы планируете использовать не сразу, как только документ загрузится, а позже.
   
   API у него сводится к одному свойству content. Сомневаюсь что браузеры тут могут накуролесить.
   

> Содержимое тегов парсится браузером, но не вызывает выполнение скриптов

Вообще скрипты итак не выполняются при вставке с помощью innerHTML.

  <template>
    <script>alert(1);</script>
  </template>

  var tmpl = document.querySelector('template');
  var tmplBody = document.importNode(tmpl.content);

  document.body.appendChild(tmplBody);

  <img src="bad-url">