Import HTML document using HTML link rel

javascript html web-component html-imports
Konga Raju picture Konga Raju · Jul 12, 2013 · Viewed 12.5k times · Source

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?

Answer

CletusW picture CletusW · Jul 12, 2013

HTML Imports only work natively in Chrome Canary (and even there they're only half-baked). For that presentation, Eric uses a project called Polymer, which provides a polyfill for HTML Imports (among other things). Check it out!

Update: The current partial implementation of HTML Imports isn't even available in Chrome Canary. Its flag is set to only turn it on for tests (not builds). It's not even an option in about:flags yet.

Update again: Now there's a flag in about:flags. It's called Enable HTML Imports. Not sure exactly when it came about. I've got it in Chrome 32.0.1671.3 dev on Linux.

Related questions

Is it possible to access Shadow DOM elements through the parent document?

This question is more aimed at user-created shadow DOM elements, but for accessibility I'll use the date input type for this question: Say for example I have a date input on my page. With a couple of bits edited out, …

Read More
How to get element in user-agent shadow root with JavaScript?

I need get elements from Shadow DOM and change it. How i can do it? <div> <input type="range" min="100 $" max="3000 $"> </div>

Read More
Polymer and WebComponentsReady event

According to the Polymer docs, the WebComponentsReady event is necessary because... The polyfills parse element definitions and handle their upgrade asynchronously. If you prematurely fetch the element from the DOM before it has a chance to upgrade, you’ll be …

Read More