0

I have the following code that uses an HTML import:

<script>
        function onImport() {
            $('#templates-container').append($(document.querySelector('link[rel="import"]').import).find("script"));
        }
</script>

<link rel="import" href="templates/templates.html" onload="onImport(event)" >

But HTML imports have been deprecated, as this warning indicates:

[Deprecation] HTML Imports is deprecated and will be removed in M80, around February 2020. Please use ES modules instead. See https://www.chromestatus.com/features/5144752345317376 and https://developers.google.com/web/updates/2019/07/web-components-time-to-upgrade for more details.

There doesn't seem to be a clean way to replace this kind of HTML import. I tried

<object type="text/html" data="templates/templates.html" onload="onImport(event)"></object>

but I get the following error:

indexTool.html:100 Uncaught TypeError: Cannot read property 'import' of null
    at onImport (indexTool.html:100)
    at HTMLObjectElement.onload (indexTool.html:108)

where the line 100 is

$('#templates-container').append($(document.querySelector('link[rel="import"]').import).find("script"));

and the line 108 is

<object type="text/html" data="templates/templates.html" onload="onImport(event)"></object>

I assume the problem is the 'link[rel="import"]' part. What can I substitute it with?

I am using Jquery 1.11.2.

  • Does this help? https://stackoverflow.com/questions/37345522/if-html-imports-are-dead-deprecated-whats-the-best-way-to-import-your-web-compo – PeterSH Aug 03 '20 at 08:13
  • Does this answer your question? [If HTML Imports are dead/deprecated what's the best way to import your web component (X-Tag) template?](https://stackoverflow.com/questions/37345522/if-html-imports-are-dead-deprecated-whats-the-best-way-to-import-your-web-compo) – Ouroborus Aug 03 '20 at 10:26
  • Thank you both, but I think I can change the import with the ` –  Aug 03 '20 at 10:52

0 Answers0