textElement

Create HTML Components using simple HTML Text strings.

Creating elements

• The module provides two exports: shadowOpen and shadowClosed.
• Pass an HTML string to either to create an element derived from globalThis.HTMLElement.
• Use the resulting class as the second argument to globalThis.customElements.define.
• Each can be used as a regular function or as a tag function.

Regular function usage

import { shadowOpen } from "./textElement.mjs";
const HTMLString = "<div>I am HTML</div>";
const SampleElementClass = shadowOpen(HTMLString);
globalThis.customElements.define("sample-element", SampleElementClass);

Tag function usage

import { shadowClosed } from "./textElement.mjs";
globalThis.customElements.define(
  "sample-element",
  shadowClosed`<div>I am HTML</div>`
);

shadowOpen vs shadowClosed

shadowOpen creates an element with an accessible shadowRoot.

globalThis.customElements.define(
  "open-element",
  shadowOpen`<div>I am open</div>`
);
//...
globalThis.console.log(
  globalThis.document.getElementsByTagName("open-element")[0].shadowRoot
); //Logs element

shadowClosed creates an element with an inaccessible shadowRoot.

globalThis.customElements.define(
  "closed-element",
  shadowClosed`<div>I am open</div>`
);
//...
globalThis.console.log(
  globalThis.document.getElementsByTagName("closed-element")[0].shadowRoot
); //Logs null

Composing elements

Use the slot element within the HTML string to allow for other HTML elements to be embedded.

globalThis.customElements.define(
  "composable-element",
  shadowOpen`<div><slot /></div>`
);

<composable-element> I'm dynamic content </composable-element>

Renders like:

<div>I'm dynamic content</div>

Named Slots

Used named slots to place multiple pieces content within an element.

globalThis.customElements.define(
  "composable-element",
  shadowOpen`<slot name="first" /><slot name="second" />`
);

<composable-element>
  <span slot="second">2nd</span>
  <span slot="first">1st</span>
</composable-element>

Renders like:

<div>
  <span>1st</span>
  <br />
  <span>2nd</span>
</div>

Styling Elements

Elements can be styled by adding a style tag to the HTML string.

Because the style tag exists within the shadowRoot, styles will only be applied within the element.

const RedTextClass = shadowOpen`<style>*{color:red}</style><slot />`;

Styling slotted elements

Slotted elements exist outside of the shadowRoot and can be styled outside of the element.

globalThis.customElements.define("red-element", RedTextClass);

<style>
  .blue {
    color: blue;
  }
</style>
<red-element>
  <span class="blue">This text is blue</span>
</red-element>

Using ::part() sudo-element

Parts of the element intended to be the target of external styles can be marked with the part attribute.

globalThis.customElements.define('stylable-element', shadowOpen`<div part=content> I'm stylable externally</div>`;

<style>
  stylable-element::part(content) {
    color: blue;
  }
</style>
<stylable-element />