Getting Started

Install

To begin, install the library.

The library can be installed using a script tag:

html

The library can also be installed using a package manager:

npm

console

bun

console

pnpm

console

deno

console

yarn

console

Import

Next, import a function from the library into your custom element:

Import es module

javascript

If you prefer to use umd modules, import from the ce-part-utils.umd.js file:

Import umd module

javascript

Both the default es module and the umd module also have minified variants that can be imported with the .min.js extension:

Import minified modules

javascript

Provide a shadow root

This library works on child elements of a shadow root, which is a tightly-scoped document within custom HTML elements that, among other things, does not inherit styles.

To use the library, create a custom element and attach its shadow root:

Create a custom element

javascript

Once a custom element is added to the document, the library functions can be called on it by passing in its shadowRoot property:

Call a function

javascript

Mapping configuration objects can be used by the functions to translate from element tag, input type, or part (for exportparts translation) to any arbitrary string:

Use config objects

javascript

Troubleshooting

Custom elements must be established within the javascript scope in order to have their shadow roots queried.

When using this library outside of a custom element's own connectedCallback method, await the whenDefined() promise for that custom element before using any of the library functions:

Use whenDefined()

javascript