Question

我正在研究Web组件，试图找出模式和最佳实践。但是，我很难导入使用影子dom的组件。问题是这样的：我发现的教程不断告诉我用模板文字来编写标记和样式，如下所示：

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定位模板，因此我可以将其内容传递给shadow dom。我的构造函数是这样的（上下都在我要导入的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中的标记？还是应该完全以另一种方式解决此问题（而不是字符串文字）？

[编辑：在我投票过多之前，请让我澄清一下：我并不是在寻找对哪种模式“更好”的主观意见，我只想寻找那些突出显示的行的替代方案。一个更好的选择器来匹配，或者如果没有，则使用一种不同的方法，使我可以使用模板而不是刻度。]

如何从影子DOM中匹配模板？

0 个答案: