External module @corpuscule/lit-html-renderer/lib/withCustomElement

Static values cannot be updated, since they don't define a part and are effectively merged into the literal part of a lit-html template. Because they are interpolated before the template is parsed as HTML, static values may occupy positions in the template that regular interpolations may not, such as tag and attribute names.

No sanitization provided. Any static value is considered as a string and merged to a template, so it can lead to undefined behavior if you use angle brackets or any other html-specific symbols.

Updating static values is impossible. If you try to replace one static value with another, it will be ignored, and if it is a dynamic value, the error will be thrown.

You can also send any custom element class as a value and its registered name will be used as a tag name. The behavior of custom elements classes are equal to the unsafe static values behavior.

Example

// index.js
import '@corpuscule/lit-html-renderer/lib/init';
import './app.js';

// app.js
import withCustomElement, {unsafeStatic} from '@corpuscule/lit-html-renderer';
import {html, render} from 'lit-html';

class Foo extends HTMLElement {}
customElements.define('x-foo', Foo);

const shtml = withCustomElement(html);
const barTag = unsafeStatic('x-bar');

render(shtml`
  <${Foo}>
    <${barTag}></${barTag}>
  </${Foo}>
`); // Will render <x-foo><x-bar></x-bar></x-foo>