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: 8 days 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 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-27T20:11:06.000Z (over 3 years ago)
• Last Synced: 2024-10-14T13:04:43.094Z (about 1 month 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>

[![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)

 [![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)

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