{"id":15099250,"url":"https://github.com/webcomponents/html-imports","last_synced_at":"2025-10-08T05:30:31.938Z","repository":{"id":66163629,"uuid":"76402075","full_name":"webcomponents/html-imports","owner":"webcomponents","description":"HTML Imports polyfill","archived":true,"fork":false,"pushed_at":"2020-10-28T16:03:39.000Z","size":1025,"stargazers_count":74,"open_issues_count":3,"forks_count":32,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-01-26T08:31:57.786Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.w3.org/TR/html-imports/","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webcomponents.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-13T22:00:32.000Z","updated_at":"2024-11-21T20:27:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"b515bf69-0b7b-482d-a910-20a641286d20","html_url":"https://github.com/webcomponents/html-imports","commit_stats":{"total_commits":232,"total_committers":11,"mean_commits":21.09090909090909,"dds":"0.18103448275862066","last_synced_commit":"b56a1d1b70e60c91d57ae9610493f602b9f3d504"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/webcomponents/html-imports","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fhtml-imports","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fhtml-imports/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fhtml-imports/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fhtml-imports/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webcomponents","download_url":"https://codeload.github.com/webcomponents/html-imports/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fhtml-imports/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278892040,"owners_count":26063919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-25T17:08:46.695Z","updated_at":"2025-10-08T05:30:31.615Z","avatar_url":"https://github.com/webcomponents.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTMLImports\n\n## This platform feature, and polyfill, is deprecated, please consider using ES Modules instead.\n\nA polyfill for [HTMLImports](https://www.w3.org/TR/html-imports/).\n\n[![Build Status](https://travis-ci.org/webcomponents/html-imports.svg?branch=master)](https://travis-ci.org/webcomponents/html-imports)\n\nThe polyfill hosts the imported documents in the import link element. E.g.\n\n```html\n\u003clink rel=\"import\" href=\"my-element.html\"\u003e\n\n\u003c!-- becomes --\u003e\n\n\u003clink rel=\"import\" href=\"my-element.html\"\u003e\n  \u003c!-- my-element.html contents --\u003e\n\u003c/link\u003e\n```\n\nThe polyfill fires the `HTMLImportsLoaded` event when imports are loaded, and exposes the `HTMLImports.whenReady` method. This api is necessary because unlike the native implementation, script elements do not force imports to resolve. Instead, users should wrap code in either an `HTMLImportsLoaded` handler or after load time in an `HTMLImports.whenReady(callback)` call.\n\nThe polyfill provides the `HTMLImports.importForElement()` method which can be used to retrieve the `\u003clink rel=import\u003e` that imported an element.\n\n## Caveats / Limitations\n\n### `\u003clink\u003e.import` is not a `Document`\n\nThe polyfill appends the imported contents to the `\u003clink\u003e` itself to leverage the native implementation of [Custom Elements](https://www.w3.org/TR/custom-elements), which expects scripts upgrading the `CustomElementRegistry` to be connected to the main document.\n\nAs a consequence, `.ownerDocument` will be the main document, while `.parentNode` of the imported children will be the `\u003clink rel=import\u003e` itself. Consider using `HTMLImports.importForElement()` in these cases. e.g:\n\n```javascript\nconst ownerDoc = HTMLImports.importForElement(document.currentScript);\nlet someElement = ownerDoc.querySelector('some-element');\nif (ownerDoc !== HTMLImports.importForElement(someElement)) {\n  // This element is contained in another import, skip.\n  someElement = null;\n}\n```\n\nIf you require document isolation, use [`html-imports#v0`](https://github.com/webcomponents/html-imports/tree/v0).\n\n### Dynamic imports\n\nThe polyfill supports dynamically added imports by observing mutations in `\u003chead\u003e` and within other imports; it won't detect imports appended in `\u003cbody\u003e`.\n\nIf you require to append imports in `\u003cbody\u003e`, notify the polyfill of these additions using the method `HTMLImports.loadImports(document.body)`.\n\n### Imported stylesheets in IE/Edge\n\nIn IE/Edge, appending `\u003clink rel=stylesheet\u003e` in a node that is not `\u003chead\u003e` breaks the cascading order; the polyfill checks if an import contains a `\u003clink rel=stylesheet\u003e`, and moves all the imported `\u003clink rel=stylesheet\u003e` and `\u003cstyle\u003e` to `\u003chead\u003e`. It drops a placeholder element in their original place and assigns a reference to the applied element, `placeholder.__appliedElement`. e.g.\n\n`my-element.html` imports a stylesheet and applies a style:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"my-linked-style.css\"\u003e\n\u003cstyle\u003e .blue { color: blue }; \u003c/style\u003e\n```\n\nAnd is imported in index.html:\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"import\" href=\"my-element.html\"\u003e\n\u003c/head\u003e\n```\n\nThis is how the resolved import will look like:\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"my-linked-style.css\"\u003e\n  \u003cstyle\u003e .blue { color: blue }; \u003c/style\u003e\n  \u003clink rel=\"import\" href=\"my-element.html\"\u003e\n    \u003clink type=\"import-placeholder\"\u003e\n    \u003cstyle type=\"import-placeholder\"\u003e\u003c/style\u003e\n  \u003c/link\u003e\n\u003c/head\u003e\n```\n\nThe placeholders contain a reference to the applied element:\n\n```javascript\nvar myImport = document.head.querySelector('link[rel=import]').import;\nvar link = myImport.querySelector('link');\nconsole.log(link.__appliedElement || link);\nvar style = myImport.querySelector('style');\nconsole.log(style.__appliedElement || style);\n```\n\n## Building \u0026 Running Tests\n\n### Build\n\n```bash\n$ git clone https://github.com/webcomponents/html-imports.git\n$ cd html-imports\n$ npm i\n$ bower i\n$ gulp\n```\n\n### Run tests\n\n```bash\n$ npm i -g web-component-tester\n$ wct\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcomponents%2Fhtml-imports","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebcomponents%2Fhtml-imports","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcomponents%2Fhtml-imports/lists"}