2

Let say I have a html document with this div inside :

div.html

  <div class="thediv">
    <h1>test</h1>
    <p class="insert"></p>
  </div>

from index.html, I import it

<link rel="import" href="/path/to/div.html">

Now If I type in the console or in a script

const div = document.querySelector('.thediv');

div is null, as if the div just vanished. But I am sure there is a way to select the element because some webcomponents libraries allow programmer to define their own custom elements one by file.

I tried many things but can't find the solution. Thanks for the help.

update :
This is true for any HTML Elements (not just div). I just pick an example for the question.

vdegenne
  • 12,272
  • 14
  • 80
  • 106

4 Answers4

2

You can reference the document set at <link> element with rel attribute set to "import" using .import property of <link> element, see also Is there a way to know if a link/script is still pending or has it failed, How to append a whole html file with jquery

document.querySelector("link[rel=import][href='template1.html']")
.import.querySelector("#template1")
guest271314
  • 1
  • 15
  • 104
  • 177
  • Thanks, this seems like a solution, I was hoping that every imports were contained in a common object or something because let say I need to `querySelector` an element in a html import that were imported from another html import, I need to go through the whole import tree just to select it, this is a bit cumbersome. But thanks – vdegenne Sep 24 '17 at 08:25
  • `.import` references a `document` object. How the HTML or other document type is composed is left to the author of the `document`. – guest271314 Sep 24 '17 at 08:27
1

Solution found here: https://www.html5rocks.com/en/tutorials/webcomponents/imports/

import.html

<template>
  <h1>Hello World!</h1>
  <!-- Img is not requested until the <template> goes live. -->
  <img src="world.png">
  <script>alert("Executed when the template is activated.");</script>
</template>

index.html

<head>
  <link rel="import" href="import.html">
</head>
<body>
  <div id="container"></div>
  <script>
    var link = document.querySelector('link[rel="import"]');

    // Clone the <template> in the import.
    var template = link.import.querySelector('template');
    var clone = document.importNode(template.content, true);

    document.querySelector('#container').appendChild(clone);
  </script>
</body>
Max Bilbow
  • 110
  • 7
0

I had 2 nice answers on my question and they helped me to find a more suitable solution for my specific problem I'm sharing here.
Again what I tried to achieve was to querySelector an element defined in an html import from the main document (i.e. index.html).
If we write something like 

<div id="thediv">
  ...
</div>

at the root of an html import, the element won't be included in the body of the main document (I think each document has its own namespace or something like that).

@guest271314 recommended to use the import property of a link element to access the content of the fetched resource but see my comment on the same post. I think this is not really neat when you deal with documents that imports other documents that imports others...
@MaxBilbow recommended the same method providing a link and an example chunk using template. Again this is not really nice when you deal with relational imports. But the link gave me the solution.

In my imported document, I write an additional script :

div.html

<div id="thediv">
  ...
</div>

<script>
document.body.prepend(
   document.currentScript.ownerDocument.querySelector('#thediv'));
</script>

Now when the html import is fetched the script will get executed and prepend the html chunk into the body of the main document.

index.html

<link rel="import" href="div.html">

<script>
// now I can querySelector('#thediv')
</script>

This is just an example and it is a dummy one, but I think I will mostly use that technique for templates, templates are hidden and it's ok to prepend them to the main document.

If you think that method could have flaws, please comment.

vdegenne
  • 12,272
  • 14
  • 80
  • 106
0

HTML Imports is deprecated and has now been removed as of M80. See https://www.chromestatus.com/features/5144752345317376 and https://developers.google.com/web/updates/2019/07/web-components-time-to-upgrade for more details.

You ca use fetch() to import your web component How to separate web components to individual files and load them?

Vitalicus
  • 1,188
  • 13
  • 15