HTML 导入在 Electron 应用程序中不起作用

Question

I'm trying to build desktop app using Electron. I'm having issue importing HTML template.

Code

<link rel="import" href="fileLocation/file.html">

file.html

<template>
  <div>Template html content </div>
</template>

//script in index.html file
<script>
   const links = document.querySelectorAll('link[rel="import"]')
   Array.prototype.forEach.call(links, (link) => {
      let template = link.import.querySelector('template')
      //error: cannot read property "querySelectorAll" of undefined
      //I tried to console.log(link)
      //it gives output: <link rel="import" href="fileLocation/file.html">
      //but in electron demo app it is giving actual template.
   })

</script>

//running below code in my index.html to test html import compatibility
console.log(
    "Native HTML Imports?", 'import' in document.createElement('link'),
    "Native Custom Elements v0?", 'registerElement' in document,
    "Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

//output: Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false

//running the same code in Electron API demo app (example app given on electron github repo)

console.log(
    "Native HTML Imports?", 'import' in document.createElement('link'),
    "Native Custom Elements v0?", 'registerElement' in document,
    "Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

//output: Native HTML Imports? true Native Custom Elements v0? true Native Shadow DOM v0? true

Please tell me how can I configure my app so that my result matches with Electron demo app.

Answer 1

I had same issue and seem like it's related to new version of electron (10.1.5).

Revert back to version 7.2.4 works for me