{"id":18782504,"url":"https://github.com/heppokofrontend/html-document-fragment-element","last_synced_at":"2026-04-09T12:46:35.254Z","repository":{"id":57267349,"uuid":"348722239","full_name":"heppokofrontend/html-document-fragment-element","owner":"heppokofrontend","description":"The document fragment custom element is a simple custom element that does like a DocumentFragment.","archived":false,"fork":false,"pushed_at":"2021-05-27T20:11:06.000Z","size":191,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T23:19:15.560Z","etag":null,"topics":["frontend","javascript","npm-package","typescript","web","webcomponents"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/html-document-fragment-element","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/heppokofrontend.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-03-17T13:35:02.000Z","updated_at":"2021-05-27T20:11:08.000Z","dependencies_parsed_at":"2022-09-02T03:40:18.003Z","dependency_job_id":null,"html_url":"https://github.com/heppokofrontend/html-document-fragment-element","commit_stats":null,"previous_names":["heppokofrontend/document-fragment-element"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heppokofrontend%2Fhtml-document-fragment-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heppokofrontend%2Fhtml-document-fragment-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heppokofrontend%2Fhtml-document-fragment-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heppokofrontend%2Fhtml-document-fragment-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heppokofrontend","download_url":"https://codeload.github.com/heppokofrontend/html-document-fragment-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239379349,"owners_count":19628686,"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":["frontend","javascript","npm-package","typescript","web","webcomponents"],"created_at":"2024-11-07T20:36:14.216Z","updated_at":"2025-12-19T22:30:14.975Z","avatar_url":"https://github.com/heppokofrontend.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;document-fragment\u0026gt;\n\n[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE) [![Published on NPM](https://img.shields.io/npm/v/html-document-fragment-element.svg)](https://www.npmjs.com/package/html-document-fragment-element) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/html-document-fragment-element) [![](https://data.jsdelivr.com/v1/package/npm/html-document-fragment-element/badge)](https://www.jsdelivr.com/package/npm/html-document-fragment-element) [![Maintainability](https://api.codeclimate.com/v1/badges/de7f3242b44531ac8fa7/maintainability)](https://codeclimate.com/github/heppokofrontend/html-document-fragment-element/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/de7f3242b44531ac8fa7/test_coverage)](https://codeclimate.com/github/heppokofrontend/html-document-fragment-element/test_coverage) [![Known Vulnerabilities](https://snyk.io/package/npm/html-document-fragment-element/badge.svg)](https://snyk.io/package/npm/html-document-fragment-element)\n [![html-document-fragment-element](https://snyk.io/advisor/npm-package/html-document-fragment-element/badge.svg)](https://snyk.io/advisor/npm-package/html-document-fragment-element)\n\n\nThe document fragment custom element is a simple custom element that does like a DocumentFragment.\n\n## Usage\n\n### In browser\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003ehtml-document-fragment-element in the browser\u003c/title\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/html-document-fragment-element@0.2.6/lib/index.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cscript\u003e\n    // code...\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Support browser\n\n- Chrome\n- Safari\n- Firefox\n- Edge\n\n### In development\n\nInstallation:\n\n```shell\nnpm install --save html-document-fragment-element\n```\n#### Use replaceWith with some elements\n\nhtml:\n\n```html\n\u003celement class=\"target\"\u003e\u003c/element\u003e\n```\n\njs:\n\n```javascript\nimport 'html-document-fragment-element';\n\nconst target = document.querySelector('.target');\nconst dfElm = document.createElement('document-fragment');\n\ndfElm.insertAdjacentHTML('afterbegin', `\n  \u003cdocument-fragment\u003e\n    \u003cp\u003eelement 1\u003c/p\u003e\n    \u003cp\u003eelement 2\u003c/p\u003e\n  \u003c/document-fragment\u003e\n`);\n\ntarget.replaceWith(dfElm);\n```\n\nResult HTML:\n\n```html\n    \u003cp\u003eelement 1\u003c/p\u003e\n    \u003cp\u003eelement 2\u003c/p\u003e\n```\n\n#### Parse the string as DOM then append to the page.\n\nThis is example of way to add two p elements as children of the body element.\n\nUsually:\n\n```javascript\nconst markup = `\n  \u003cp\u003eelement 1\u003c/p\u003e\n  \u003cp\u003eelement 2\u003c/p\u003e\n`\n\nconst parser = new DOMParser();\nconst {body} = parser.parseFromString(markup, 'text/html');\n\nfor (const p of [...body.childNodes]) {\n  document.body.append(p);\n}\n```\n\nWith HTMLDocumentFragmentElement:\n\n```javascript\nimport 'html-document-fragment-element';\n\nconst markup = `\n  \u003cp\u003eelement 1\u003c/p\u003e\n  \u003cp\u003eelement 2\u003c/p\u003e\n`\n\nconst dfElm = document.createElement('document-fragment');\n\ndfElm.insertAdjacentHTML('afterbegin', markup);\ndocument.body.append(dfElm);\n```\n\n#### Use as constructor \n\n```js\nimport { HTMLDocumentFragmentElement } from 'html-document-fragment-element';\n\nconst dfElm = new HTMLDocumentFragmentElement();\n```\n\n##### Syntax\n\n```javascript\nnew HTMLDocumentFragmentElement(content, [...content]);\n\nnew HTMLDocumentFragmentElement(contents);\n```\n\n##### Parameters\n\nArguments are implicitly converted to strings if they are not objects.\n\n###### `content`\n\nThe element is initialized with the given `string` or `Node` as `childNode`.\n\n###### `contents`\n\nThe element is initialized with the given something as `childNode`.\n\nThe types are allowed `string`, `Node`, `NodeList`, `HTMLCollection` and arrays containing them.\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheppokofrontend%2Fhtml-document-fragment-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheppokofrontend%2Fhtml-document-fragment-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheppokofrontend%2Fhtml-document-fragment-element/lists"}