https://github.com/webreflection/html-parsed-element
A base custom element class with a reliable `parsedCallback` method.
https://github.com/webreflection/html-parsed-element
Last synced: about 2 months ago
JSON representation
A base custom element class with a reliable `parsedCallback` method.
- Host: GitHub
- URL: https://github.com/webreflection/html-parsed-element
- Owner: WebReflection
- Created: 2018-10-19T10:09:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-03-27T19:09:57.000Z (almost 5 years ago)
- Last Synced: 2025-10-02T23:33:00.573Z (4 months ago)
- Language: HTML
- Size: 47.9 KB
- Stars: 56
- Watchers: 6
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# html-parsed-element
[](https://travis-ci.com/WebReflection/html-parsed-element) [](https://coveralls.io/github/WebReflection/html-parsed-element?branch=master) 
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 safe!';
console.log(this.parsed); // always true here
}
}
);
// or ...
const {withParsedCallback} = HTMLParsedElement;
customElements.define(
'other-element',
withParsedCallback(class extends HTMLElement {
parsedCallback() {
this.innerHTML = 'always safe!';
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.**