# html-parsed-element

> A base custom element class with a reliable `parsedCallback` method

Latest version **0.4.1** (published 2021-03-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install html-parsed-element
pnpm add html-parsed-element
yarn add html-parsed-element
bun add html-parsed-element
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2021-03-27 |
| First published | 2018-10-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 56 |
| Author | Andrea Giammarchi |
| Maintainers | webreflection |
| Keywords | web, components, custom, elements |

## Links

- npm: https://www.npmjs.com/package/html-parsed-element
- Repository: https://github.com/WebReflection/html-parsed-element
- Homepage: https://github.com/WebReflection/html-parsed-element#readme
- Issues: https://github.com/WebReflection/html-parsed-element/issues
- npm.io page: https://npm.io/package/html-parsed-element

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.4.1 (latest) — 2021-03-27
- 0.4.0 — 2018-12-07
- 0.3.2 — 2018-11-02
- 0.3.1 — 2018-11-02
- 0.3.0 — 2018-10-31
- 0.2.2 — 2018-10-20
- 0.2.1 — 2018-10-19
- 0.2.0 — 2018-10-19
- 0.1.0 — 2018-10-19

## README

# html-parsed-element

[![Build Status](https://travis-ci.com/WebReflection/html-parsed-element.svg?branch=master)](https://travis-ci.com/WebReflection/html-parsed-element) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/html-parsed-element/badge.svg?branch=master)](https://coveralls.io/github/WebReflection/html-parsed-element?branch=master) ![WebReflection status](https://offline.report/status/webreflection.svg)

A base custom element class with a reliable `parsedCallback` method and a `parsed` getter.

It can be used as base class to extend or through its public static `withParsedCallback(Class, name = 'parsed'):Class` method;

Class born [after discussing why `connectedCallback` is considered harmful](https://github.com/w3c/webcomponents/issues/551#issuecomment-429262811) and how to properly setup any custom element.

Based off the [contributions](https://github.com/w3c/webcomponents/issues/551#issuecomment-431258689) by [@franktopel](https://github.com/franktopel) and [@irhadkul](https://github.com/irhadkul).

```js
customElements.define(
  'custom-element',
  class extends HTMLParsedElement {
    parsedCallback() {
      this.innerHTML = 'always <strong>safe</strong>!';
      console.log(this.parsed); // always true here
    }
  }
);

// or ...
const {withParsedCallback} = HTMLParsedElement;
customElements.define(
  'other-element',
  withParsedCallback(class extends HTMLElement {
    parsedCallback() {
      this.innerHTML = 'always <strong>safe</strong>!';
      console.log(this.parsed); // always true here
    }
  })
);
```

## How to install:

```js
// esm with a good bundler
import HTMLParsedElement from 'html-parsed-element';

// esm with a less good bundler
import HTMLParsedElement from 'html-parsed-element/esm';

// esm via CDN (or you can use a relative/absolute path)
import HTMLParsedElement from 'https://unpkg.com/html-parsed-element/esm/index.js';

// cjs
const HTMLParsedElement = require('html-parsed-element');

// bad cjs bundler
const HTMLParsedElement = require('html-parsed-element/cjs');
```

## Common gotcha

As of now, `html-parsed-element` is written and will be returned for `import` and `require()` in ES2015 (formerly known as "ES6"), so **make sure your build process properly transpiles `html-parsed-element` if you need to support less capable browsers.**

---
_Source: https://npm.io/package/html-parsed-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._