CODEWITHSUNDEEP
javascripthtmlelectronweb-component
Muhammad Saquib Shaikh
Muhammad Saquib Shaikh

Reputation: 298

HTML import is not working in Electron app

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.

Upvotes: 1

Views: 509

Answers (1)

Anh N. Nguyen
Anh N. Nguyen

Reputation: 509

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

Upvotes: 1

Related Questions