{"id":25322775,"url":"https://github.com/ccjmne/template-element-loader","last_synced_at":"2026-04-17T06:04:29.115Z","repository":{"id":43263316,"uuid":"510775428","full_name":"ccjmne/template-element-loader","owner":"ccjmne","description":"A webpack loader that lets you consume your HTML contents as actual \u003ctemplate\u003e elements.","archived":false,"fork":false,"pushed_at":"2022-07-06T17:19:49.000Z","size":740,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-13T23:48:11.660Z","etag":null,"topics":["custom-element","element","html","loader","template","template-element","template-tag","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ccjmne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-05T14:39:19.000Z","updated_at":"2022-07-08T20:58:12.000Z","dependencies_parsed_at":"2022-09-14T22:54:49.575Z","dependency_job_id":null,"html_url":"https://github.com/ccjmne/template-element-loader","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccjmne%2Ftemplate-element-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccjmne%2Ftemplate-element-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccjmne%2Ftemplate-element-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccjmne%2Ftemplate-element-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ccjmne","download_url":"https://codeload.github.com/ccjmne/template-element-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744166,"owners_count":20988779,"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":["custom-element","element","html","loader","template","template-element","template-tag","webpack"],"created_at":"2025-02-13T23:48:27.628Z","updated_at":"2025-10-30T06:36:10.898Z","avatar_url":"https://github.com/ccjmne.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `\u003ctemplate\u003e`-element-loader\nA [webpack](https://webpack.js.org/) loader that lets you consume your HTML contents as actual [`\u003ctemplate\u003e` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n\n## Why?\n\nIt allows preprocessing of the contents of your template to speed up subsequent rendering when needed by saving CPU cycles on HTML parsing.\n\nIt's only relevant at all if you reuse that template multiple times; harmless otherwise.\n\n## How-to\n\nUsage example:\n\n* `webpack.config.js`:\n```javascript\nrules: [{\n  test: /\\.template\\.html$/,\n  use: {\n    loader: 'template-element-loader',\n    options: {\n      removeComments: true, // or any of the HTMLMinifier options\n    },\n  },\n}]\n```\n\n* `my-component.template.html`:\n```html\n\u003cdiv\u003e\n    \u003ch2\u003eButtered Toast Recipe\u003c/h2\u003e\n    \u003col type=\"I\"\u003e\n        \u003cli\u003eChoose your bread and place it in the toaster.\u003c/li\u003e\n        \u003cli\u003eChoose the toaster setting and set it off.\u003c/li\u003e\n        \u003cli\u003eRemove the toast.\u003c/li\u003e\n        \u003cli\u003eButter your toast.\u003c/li\u003e\n    \u003c/ol\u003e\n\u003c/div\u003e\n```\n\n* `my-component.controller.ts`:\n```typescript\nimport template from './my-component.template.html';\n\nclass MyElement extends HTMLElement {\n\n  constructor() {\n    super();\n\n    this\n      .attachShadow({ mode: 'closed' })\n      .appendChild(template.content.cloneNode(true));\n  }\n\n}\n```\n\n## Options\n\nThis loader additionally minifies your HTML content using [HTMLMinifier](https://github.com/terser/html-minifier-terser).  \nYou can refer to their [Options Quick Reference](https://github.com/terser/html-minifier-terser#options-quick-reference) table for guidance.\n\n## TypeScript typings\n\nIf your project uses [TypeScript](https://www.typescriptlang.org/), we recommend you include something like the excerpt below to you typings:\n\n* `declarations.d.ts`:\n```typescript\ndeclare module '*.template.html' {\n  const template: HTMLTemplateElement;\n  export default template;\n}\n```\n\n## Licensing\n\nUses the **MIT** license.\n\n\u003e See [LICENSE](./LICENSE) for the complete text or [the MIT entry on TLDR Legal](https://tldrlegal.com/license/mit-license) for a quick summary.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccjmne%2Ftemplate-element-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fccjmne%2Ftemplate-element-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccjmne%2Ftemplate-element-loader/lists"}