{"id":19346814,"url":"https://github.com/juicy/imported-template","last_synced_at":"2025-11-14T20:03:25.414Z","repository":{"id":15400767,"uuid":"18132709","full_name":"Juicy/imported-template","owner":"Juicy","description":"Custom element that lets you load template from external file into your document, and take full control over loaded \u003cscript\u003es and \u003clink rel=\"import\"\u003es. Thanks to HTML Imports - caching, script execution, etc. is completely native. Declarative way for client-side includes boosted with HTML Imports features.","archived":false,"fork":false,"pushed_at":"2020-03-30T14:04:36.000Z","size":2847,"stargazers_count":28,"open_issues_count":12,"forks_count":4,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-04-27T07:33:48.092Z","etag":null,"topics":["plain-js","used-in-starcounter-app"],"latest_commit_sha":null,"homepage":"http://juicy.github.io/imported-template/examples/index.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Juicy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-26T09:22:51.000Z","updated_at":"2023-01-14T00:59:35.000Z","dependencies_parsed_at":"2022-07-13T21:53:53.569Z","dependency_job_id":null,"html_url":"https://github.com/Juicy/imported-template","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Juicy%2Fimported-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Juicy%2Fimported-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Juicy%2Fimported-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Juicy%2Fimported-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Juicy","download_url":"https://codeload.github.com/Juicy/imported-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240457945,"owners_count":19804489,"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","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":["plain-js","used-in-starcounter-app"],"created_at":"2024-11-10T04:12:37.802Z","updated_at":"2025-11-14T20:03:25.329Z","avatar_url":"https://github.com/Juicy.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u0026lt;imported-template\u0026gt; [![Build Status](https://travis-ci.org/Juicy/imported-template.svg?branch=master)](https://travis-ci.org/Juicy/imported-template)\n==============\n\u003e Declarative way for client-side includes boosted with HTML Imports features.\n\n`\u003cimported-template\u003e` is a custom element that lets you load template from external file into your document, and take full control over loaded `\u003cscript\u003e`s and `\u003clink rel=\"import\"\u003e`s. Thanks to HTML Imports - caching, script execution, etc. are completely native.\nIt also provides a simple data-binding feature, that plays nice with Polymer or pure JavaScript + HTML data-binding.\n\n### Small sample\n\nIf you have your partial **/path/to/file.html** full of your HTML magic:\n```html\n\u003clink rel=\"import\" href=\"awesome-component.html\"\u003e\n\u003cscript src=\"init/some/stuff.js\"\u003e\u003c/script\u003e\n\u003ctemplate\u003e\n\t\u003ch1\u003eHello World\u003c/h1\u003e\n\t\u003cawesome-component\u003e\u003c/awesome-component\u003e\n\t\u003cscript\u003edoMagicPerStampedContent();\u003c/script\u003e\n\u003c/template\u003e\n```\nYou can load all dependencies and stamp template content in your main document with just\n```html\n\u003cimported-template href=\"/path/to/file.html\"\u003e\u003c/imported-template\u003e\n```\n\n\u003e Please note that dependencies will be loaded only once, but content and inner `\u003cscript\u003edoMagic...` will get stamped and executed as many times as you use `\u003cimported-template\u003e`\n\n## Demo/Examples\n\nTo see more features and examples\n[Check it live!](http://juicy.github.io/imported-template/examples/index.html)\n\n## [Tests/Spec](http://juicy.github.io/imported-template/test/)\n\n## Features\nSee the full article on features, use cases and the way it's done at http://starcounter.io/html-partialsincludes-webcomponents-way/\n\n - Imports external files, and stamps inline HTML markup,\n - Supports multiple (concatenated) templates per partial,\n - HTML Imports features:\n  - Sends request for template only once (HTML Import's caching),\n  - Supports `\u003cscript\u003e, \u003clink\u003e, \u003cstyle\u003e` tags to be executed once,\n  - Supports `\u003cscript\u003e, \u003cstyle\u003e` tags per template instance,\n - Attaches data-binding to imported content,\n - Works fine with Polymer auto-binding features\n\n\n### Partial limitations\n\n - It should be W3C compliant Document body,\n - It should contain at least one `\u003ctemplate\u003e` tag in the root node.\n\n### Rationale\n\n`imported-template` evolved out of [x-html](https://github.com/Palindrom/x-html) (now [`juicy-html`](https://github.com/Juicy/juicy-html) ) due to need for better control of `\u003cscripts\u003e` and HTML Imports execution. See discussion [here](https://github.com/Juicy/juicy-html/issues/8)\n\n\n## Install\n\nInstall the component using [Bower](http://bower.io/):\n\n```sh\n$ bower install imported-template --save\n```\n\nOr [download as ZIP](https://github.com/Juicy/imported-template/archive/master.zip).\n\n## Usage\n\n1. Import Web Components' polyfill, if needed:\n\n    ```html\n    \u003cscript src=\"bower_components/webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    ```\n\n2. Import Custom Element:\n\n    ```html\n    \u003clink rel=\"import\" href=\"bower_components/imported-template/imported-template.html\"/\u003e\n    ```\n\n3. Start using it!\n\n\tTo load content from file:\n    ```html\n    \u003cimported-template href=\"/your/partial.html\"\u003e\u003c/imported-template\u003e\n    ```\n\tTo attach data to content:\n    ```html\n    \u003cimported-template href=\"/your/partial.html\" model='{\"json\":\"data\"}'\u003e\u003c/imported-template\u003e\n\t```\n\n## Attributes/Properties\n\nAttribute           | Options         | Default     | Description\n---                 | ---             | ---         | ---\n`html`              | *String*\t\t  | `\"\"`\t    | Safe HTML code to be stamped. Setting this one will skip any pending request for `href` and remove `href` attribute.\n`href`              | *String*\t\t  | `\"\"`\t    | Path of a partial to be loaded. Setting this one will remove `html` attribute.\n`model`(_optional_) | *Object/String* | `undefined` | Object (or `JSON.stringify`'ied Object) to be attached to every stamped (root) node\n\n## Properties\n\nProperty       | Type              | Default       | Description\n---            | ---               | ---           | ---\n`model`        | *Object*          | `undefined`   | See [attributes](#Attributes), plays nice with Polymer data-binding\n`html`         | *String*          | `\"\"`\t       | See [attributes](#Attributes)\n`href`         | *String*          | `\"\"`\t       | See [attributes](#Attributes)\n`pending`      | *HTMLLinkElement* |               | HTML Import's `\u003clink\u003e` that is being loaded (if any)\n`stampedNodes` | *Array*           | `[]`          | Array of stamped nodes.\n\nPlease note, that properties are available after element is upgraded.\nTo provide a state before element is upgraded, please use attributes.\n\n## Events\n\nName       | When                               | `event.detail`\n---        | ---                                | ---\n`stamped`  | Every time content is (re-)stamped | *Array* of stamped *Node* s\n`stamping` | Just before stamping the fragment  | *DocumentFragment*\tbeing stamped\n\n### Dependencies\n\n`\u003cjuicy-html\u003e` is framework agnostic custom element, so all you need is Web Components support. However, it plays really nice with Polymer Auto-binding templates, or any other binding library, that sets HTML elements' properties and/or attributes. Check our demos and examples.\n\n## Browser Support\n\nBrowser support relies mainly on polyfills support/spec compliance.\n\n| Chrome | IE11 | Edge | Firefox  | Safari 10 |\n|:------:|:----:|:----:|:--------:|:--------:|\n|  ✓     | ✓**  | ✓    | ✓        | ✓        |\n\n\\*\\* **V1**: IE11 does not support `currentScript`, so a bunch of tests for useful cases fail.\n\n\n## [Contributing and Development](CONTRIBUTING.md)\n\n## History\n\nFor the detailed changelog, check [Releases](https://github.com/Juicy/imported-template/releases).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuicy%2Fimported-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuicy%2Fimported-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuicy%2Fimported-template/lists"}