Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Remove docs, add pointer to new repo & new docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
Arthur Evans committed Dec 9, 2014
1 parent a0a95b7 commit 5dd5a95
Showing 1 changed file with 2 additions and 57 deletions.
59 changes: 2 additions & 57 deletions README.md
@@ -1,61 +1,6 @@
## Moved
This repo has moved to https://github.com/Polymer/webcomponentsjs

## Learn the tech
The HTML Imports polyfill has moved to https://github.com/webcomponents/webcomponentsjs

### Why HTML Imports?
For more information, see: http://webcomponents.org/polyfills/

This repository contains a Javascript polyfill for the [HTML Imports](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html) specification.

HTML Imports are a way to include and reuse HTML documents in other HTML documents. As `<script>` tags let authors include external Javascript in their pages, imports let authors load full HTML resources. In particular, imports let authors include [Custom Element](https://github.com/Polymer/CustomElements) definitions from external URLs.

### Basic usage

For HTML imports use the `import` relation on a standard `<link>` tag, for example:

<link rel="import" href="import-file.html">

## Polyfill details

### Getting Started

Include the `html-imports.js` or `html-imports.min.js` (minified) file in your project.

<script src="HTMLImports/html-imports.js"></script>

`html-imports.js` is the debug loader and uses `document.write` to load additional modules.
Use the minified version (`html-imports.min.js`) if you need to load the file dynamically.

### Polyfill Notes

In imported documents, `href` and `src` attributes in HTML, and `url` properties in CSS files, are relative to the location of the imported document, not the main document.

The HTML Imports polyfill begins processing link tags when the `DOMContentLoaded` event fires. To know when loading is complete, listen for the `HTMLImportsLoaded` event on `document` or `window`.

Example:

<script>
window.addEventListener('HTMLImportsLoaded', function(e) {
// all imports loaded
});
</script>

The polyfill loads linked stylesheets, external scripts, and nested HTML imports, but does not parse any data in the loaded resources. For parsing imports, combine HTML Imports with [Custom Elements](https://github.com/Polymer/CustomElements). As long as the HTML Imports is loaded first, the Custom Elements polyfill will detect it, and process all imports when `HTMLImportsLoaded` event fires.

#### The WebComponentsReady event

Under native imports, `<script>` tags in the main document block the loading of imports. This is to ensure the imports have loaded and any registered elements in them have been upgraded. This native behavior is difficult to polyfill so the [HTML Imports polyfill](https://github.com/Polymer/HTMLImports) doesn't try. Instead the `WebComponentsReady` event is a stand in for this behavior:

<script>
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
});
</script>

#### Other notes

- In a native HTML Imports, `document.currentScript.ownerDocument` references the import document itself. In the polyfill use `document._currentScript.ownerDocument` (note the underscore).

## Tools & Testing

For running tests or building minified files, consult the [tooling information](http://polymer-project.org/resources/tooling-strategy.html).

0 comments on commit 5dd5a95

Please sign in to comment.