@zywave/customelement-manifest-element

@zywave/customelement-manifest-element

The <customelement-manifest-element> custom element is built to render a standards-compliant custom element manifest in a user friendly way. This element is used in https://booster.zywave.dev to render our own web component documentation.

For consumers

Installation

Three different ways to consume customelement-manifest-element:

1. Package dependency

• Typical package.json dependency yarn add @zywave/customelement-manifest-element or npm i @zywave/customelement-manifest-element

1. Complete bundled javascript module

• <script type="module" src="https://cdn.zywave.com/@zywave/customelement-manifest-element@latest/index.bundle.js"></script>
• This bundled module is plug and play ready, customelement-manifest-element and all dependencies are included.

1. Lean javascript module

• <script type="module" src="https://cdn.zywave.com/@zywave/customelement-manifest-element@latest/index.js"></script>
• This lean module version, similar to #2 but with some assembly required, not all customelement-manifest-element dependencies are included. Consider bundling the dependencies yourself (e.g. webpack, rollup), or using importmaps (note: bleeding edge, not supported in all modern browsers) to resolve bare module dependencies.

Example

<customelement-manifest-element src="./custom-elements.json"></customelement-manifest-element>

API

Read the api docs for more information.

Experimental

This component uses some experimental features that are only in the latest versions of Chrome or Firefox.

To use this in other browsers that support native ES modules, you can use es-module-shims.

We use:

• import attributes to load CSS
  • Can be polyfilled with es-module-shims >= 1.7.3
• CSS Houdini Properties and Values API

For contributors

Building

> npm install
> npm run build

Demo

> npm run demo

Testing

> npm run test

Note: On fresh install or if updating Playwright, you may need to execute the following command:

> npx playwright install

Lint

This repository uses prettier and eslint for maintaining opinionated code style. The following command can be run locally to lint your code and will be run at CI time as well:

> npm run lint