hpe

html-parsed-element

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

Showing:

Popularity

Downloads/wk

552

GitHub Stars

35

Maintenance

Last Commit

6mos ago

Contributors

3

Package

Dependencies

0

Size (min+gzip)

0.7KB

License

ISC

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

html-parsed-element

Build Status Coverage Status WebReflection status

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 and how to properly setup any custom element.

Based off the contributions by @franktopel and @irhadkul.

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:

// 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100