https://github.com/heppokofrontend/html-document-fragment-element
The document fragment custom element is a simple custom element that does like a DocumentFragment.
https://github.com/heppokofrontend/html-document-fragment-element
frontend javascript npm-package typescript web webcomponents
Last synced: 3 months ago
JSON representation
The document fragment custom element is a simple custom element that does like a DocumentFragment.
- Host: GitHub
- URL: https://github.com/heppokofrontend/html-document-fragment-element
- Owner: heppokofrontend
- License: mit
- Created: 2021-03-17T13:35:02.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-27T20:11:06.000Z (about 5 years ago)
- Last Synced: 2025-02-17T23:19:15.560Z (over 1 year ago)
- Topics: frontend, javascript, npm-package, typescript, web, webcomponents
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/html-document-fragment-element
- Size: 187 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# <document-fragment>
[](LICENSE) [](https://www.npmjs.com/package/html-document-fragment-element) [](https://www.webcomponents.org/element/html-document-fragment-element) [](https://www.jsdelivr.com/package/npm/html-document-fragment-element) [](https://codeclimate.com/github/heppokofrontend/html-document-fragment-element/maintainability) [](https://codeclimate.com/github/heppokofrontend/html-document-fragment-element/test_coverage) [](https://snyk.io/package/npm/html-document-fragment-element)
[](https://snyk.io/advisor/npm-package/html-document-fragment-element)
The document fragment custom element is a simple custom element that does like a DocumentFragment.
## Usage
### In browser
```html
html-document-fragment-element in the browser
// code...
```
#### Support browser
- Chrome
- Safari
- Firefox
- Edge
### In development
Installation:
```shell
npm install --save html-document-fragment-element
```
#### Use replaceWith with some elements
html:
```html
```
js:
```javascript
import 'html-document-fragment-element';
const target = document.querySelector('.target');
const dfElm = document.createElement('document-fragment');
dfElm.insertAdjacentHTML('afterbegin', `
element 1
element 2
`);
target.replaceWith(dfElm);
```
Result HTML:
```html
element 1
element 2
```
#### Parse the string as DOM then append to the page.
This is example of way to add two p elements as children of the body element.
Usually:
```javascript
const markup = `
element 1
element 2
`
const parser = new DOMParser();
const {body} = parser.parseFromString(markup, 'text/html');
for (const p of [...body.childNodes]) {
document.body.append(p);
}
```
With HTMLDocumentFragmentElement:
```javascript
import 'html-document-fragment-element';
const markup = `
element 1
element 2
`
const dfElm = document.createElement('document-fragment');
dfElm.insertAdjacentHTML('afterbegin', markup);
document.body.append(dfElm);
```
#### Use as constructor
```js
import { HTMLDocumentFragmentElement } from 'html-document-fragment-element';
const dfElm = new HTMLDocumentFragmentElement();
```
##### Syntax
```javascript
new HTMLDocumentFragmentElement(content, [...content]);
new HTMLDocumentFragmentElement(contents);
```
##### Parameters
Arguments are implicitly converted to strings if they are not objects.
###### `content`
The element is initialized with the given `string` or `Node` as `childNode`.
###### `contents`
The element is initialized with the given something as `childNode`.
The types are allowed `string`, `Node`, `NodeList`, `HTMLCollection` and arrays containing them.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## License
MIT