Package Exports

html-parsed-element
html-parsed-element/cjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (html-parsed-element) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

html-parsed-element

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.