javascripthtmlweb-componenthtml-imports

Import HTML document using HTML link rel

I am trying to import an HTML document into my main document using 

<link rel="import" href="my-tabs.html">

but it doesn't seem to be working.

I am following this presentation, using Chrome 28, and I have enabled these two flags in about:flags:

Enable experimental WebKit features
Enable experimental JavaScript

Am I missing something? or is there another flag I need to enable to get it?

Solution

  • For latecomers:

    As of 2021, HTML imports feature has been deprecated.

    Due to uncertainty about this feature, I would not recommend its usage.

    My recommendation: Add a data- attribute to html imports. Write a script that runs on all those elements with that attribute and access those html parts using fetch() in the script. Create a div and add that fetched import to that div at the same place. Essentially, add some JS based post processing that will download the html and inset into the same place as the import, replacing it.