This repository has been archived by the owner on Mar 13, 2018. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove docs, add pointer to new repo & new docs.
- Loading branch information
Arthur Evans
committed
Dec 9, 2014
1 parent
a0a95b7
commit 5dd5a95
Showing
1 changed file
with
2 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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). |