Question

我有一个Electron App，在我的index.html文件中，我在<head>中导入了许多html文件，如下所示：

<link rel="import" href="settings.html">
<link rel="import" href="dashboard.html">
<link rel="import" href="locker.html">

目前，每个文件都相同，但标题不同，并且遵循相同的模板：

<template class="section-template">
  <section id="locker" class="wrapper">
    <div class="inner">
      <h3>Locker</h3>
    </div>
  </section>
</template>

在我的JavaScript中，我有以下在页面加载时触发的函数：

console.log(`Importing all to DOM`);
const links = document.querySelectorAll('link[rel="import"]')

Array.prototype.forEach.call(links, function(link){
  var content = link.import;
  var el = content.querySelector('.section-template');
  console.log(el);
})

这是选择所有导入的文件，调用它们然后应该根据section-template类选择整个文件。

出于某种原因，el为空，我无法弄清楚原因。注销content会显示此信息。不确定为什么内容出现在<head>中，尽管我认为这是问题的一部分 http://imgur.com/a/612c8

我已将locker.html文件的HTML复制到JSFiddle中，并在文档上运行了JavaScript，该工作正常。

有点混淆为什么这不起作用。

更新：示例如何在导入下运行 https://www.html5rocks.com/en/tutorials/webcomponents/imports/

querySelector不选择类

0 个答案: