Как сопоставить шаблон из теневого DOM? - PullRequest
Новая
       7

Как сопоставить шаблон из теневого DOM?

0 голосов
/ 07 октября 2018

Я изучаю веб-компоненты, пытаюсь выработать шаблоны и лучшие практики.У меня есть трудности с импортом компонента, который использует теневой домен, хотя.Проблема заключается в следующем: учебники, которые я нахожу, постоянно говорят мне писать разметку и стиль в литералах шаблона, как показано ниже: 

class FooBar extends HTMLElement{
constructor(){
  var shadow = this.attachShadow({mode: 'open'});

  //Add markup elements
  var wrapper = document.createElement('span');
  wrapper.setAttribute('class','wrapper');
  wrapper.textContent = `
  <div class="outer">
  <div class="inner"></div>
  </div>
  `

  //Add style
  var style = document.createElement('style');
  style.textContent = `
  .wrapper {
  height: 512px;
  width: 1024px;
  }
  .outer{
  height: 256px;
  width: 512px;
  }
  .inner{
  height: 128px;
  width: 256px;
  }
  `

  shadow.appendChild(wrapper);
  shadow.appendChild(style);
}

Как видите, элементы создаются в javascript, а содержимое записывается между тиками,Я не могу принять это как хорошую практику.Вместо этого я хочу написать разметку и стиль в теге шаблона (который позволяет подсветку синтаксиса).Тот же пример будет выглядеть примерно так: 

<template>
  <span class="wrapper">
    <div class="outer">
      <div class="inner">
      </div>
    </div>
  </span>
  <style>
    .wrapper {
    height: 512px;
    width: 1024px;
    }
    .outer{
    height: 256px;
    width: 512px;
    }
    .inner{
    height: 128px;
    width: 256px;
    }
  </style>
</template>

Проблема заключается в том, чтобы нацелить шаблон на javascript, чтобы я мог передать его содержимое в теневой домен.Мой конструктор выглядит следующим образом (оба выше и ниже находятся в одном и том же html, который я импортирую): 

   <script>
       class FooBar extends HTMLElement{
         constructor(){
           super();
           const shadow =  this.attachShadow({mode: 'open'});
           //v---These lines below are awful ---------------------------------------------------

           shadow.innerHTML = document.querySelector('link[href$="/foo-bar.html"]')
                               .import.querySelector("template").innerHTML

           //^---Those lines above are terrible-------------------------------------------------
         }
       }
       (function(){
         customElements.define(foo-bar, FooBar)
       })();
   </script>

Выделенные строки показывают момент, когда я получаю содержимое шаблона и внедряю его в shadowRoot.И это ужасный кусок кода.Мой вопрос: есть ли разумный способ сопоставить с querySelector тег, который находится в импортированном HTML, из импортированного HTML, когда он загружается?Или я должен полностью решить эту проблему (но не строковые литералы)?

[Редактировать: прежде чем я буду слишком сильно опускаться, позвольте мне уточнить: я не ищу субъективных мнений о том, какой шаблон будет«лучше», я просто хочу альтернативы для этих выделенных строк.Лучший селектор для соответствия или, если его нет, другой подход, который позволит мне использовать шаблон вместо галочек.]

...